2 replies [Last post]
ricky spires
ricky spires's picture
Offline
newbie
Last seen: 7 years 3 weeks ago
Joined: 2012-11-19
Posts: 1
Points: 2

hello.

im having trouble with the sizing of my background image

if i do this the image resizes to 300px which is great:

#wrapper{
    width:100%;
    height:300px;  
}
.size{
    width:300px;
    height:300px;
    margin: 0 auto;
}
.size img{
    width:100%;
}
 
<div id="wrapper">
    <div class="size">
        <img src="cont-bg.png"/>
    </div>
</div>

but if i do this, the image will not resize with the div.

#wrapper{
    width:100%;
    height:300px;  
}
.size{
    width:300px;
    height:300px;
    margin: 0 auto;
    background-image:url(cont-bg.png);
    background-repeat: no-repeat;
}
 
 
<div id="wrapper">
    <div class="size">
    </div>
</div>

so....

how do i get my image to resize to fit the 300x300 div when adding the image into the css and not in the html ???

thanks
ricky

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi ricky, Have a look into

Hi ricky,
Have a look into background-size

rickyspires
rickyspires's picture
Offline
newbie
london
Last seen: 7 years 3 weeks ago
london
Joined: 2010-12-20
Posts: 7
Points: 11

no good

hello.

thanks but i tried that and they dont work. i guess its my browser but im looking for an answer css2 stylee Smile