Tomislav Tomi Nikolic Tomislav Tomi Nikolic - 5 months ago 18
CSS Question

CSS Image size wont change

Hey guys so my problem is quite simple just I am not sure how to fix it.

I am basically trying to scale this image to fit the div width but it aint working for some reason. Width and height will keep their original size for some reason..

<body>
<div id="header">
<div>
<ul id="mymenu">
<li><a href="text">homepage</a></li>
<li><a href="text">blog</a></li>
<li><a href="text">photos</a></li>
<li><a href="text">about</a></li>
<li><a href="text">links</a></li>
<li><a href="text">contact</a></li>
</ul>
</div>

<div id="bgfix"> <!-- here is the image -->

</div>
</div>
</body>


Thats the HTML of it, it should take mymenu size and make the picture be its 100% width.

CSS code

#bgfix {
margin-top: 20px;
background: url("../img/home_bg.jpg");
background-repeat: no-repeat;
width: 100%;
height: 250px;

}

Answer

Use this:

#bgfix {
    margin-top: 20px;
    background: url("../img/home_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

This will make the background image the full width of its parent and adjust the heigth automatically to keep the correct proportions of the image. Alternatively, you can use background-size: cover, which will fill the container, but cut off some of the image, or background-size: contain;, which will scale the image to fit into the container, but leave a little bit of space.