1

I'm new on Stackoverflow, and i need help with these problem.

So the problem is: I want this dashed image height to 100% of the container.

enter image description here

HTML

<div id="test1">

</div>

<aside>
    <?php
    if (logged_in() === true) {
        include 'includes/widgets/loggedin.php';
    } else {
        include 'includes/widgets/login.php';
    }
    include 'includes/widgets/user_count.php';
    include 'includes/widgets/sponsors.php';
    include 'includes/widgets/partners.php';

    ?>
</aside>

CSS

aside {
    width:260px;
    float:right;
    background-image:url(../images/dashed.png);
    background-repeat: repeat-y;
    padding-left:15px;
}

#container, footer {
    background:#fff;
    width:1100px;
    margin:0 auto;
    padding:20px;
}

#test1 {
height:1000px;
}

Can anyone help me?

Captain Obvlious
  • 19,754
  • 5
  • 44
  • 74
Bart van der Hoeven
  • 11
  • 2
  • You know there is a `border dashed` property on CSS? – DaniP Nov 20 '14 at 21:20
  • We need more details about your html. Apparently your 'aside' doesn't have the same height as the '#container'. – Diego Nov 20 '14 at 21:32
  • @Danko There is a indeed border dashed, but it is not working for height:100%; and height:auto; it only works with image, so i tried but i still wont come out. – Bart van der Hoeven Nov 20 '14 at 21:33
  • @Diego I have edited now, is this ok? – Bart van der Hoeven Nov 20 '14 at 21:36
  • But... where is the #container in your markup?, If the height of #test1 is the same in #container then you should set the aside height as in #test1 (1000px). Otherwise if the height change dinamically you can use this script: document.querySelector("aside").style.height = document.querySelector("#container").offsetHeight + 'px'; – Diego Nov 20 '14 at 22:06
  • This may help: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window – dhc Nov 21 '14 at 22:35

1 Answers1

0

Try this:

aside { 
  background: url(images/bg.jpg) repeat-y center center fixed; 
  padding-left:15px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
TResponse
  • 3,940
  • 7
  • 43
  • 63