在div上拉伸图像背景或在div中拉伸完整背景图像

Question

I have this html structure

<div id="bg">

</div>

and a css

#bg{
    background: transparent url(images/bg.png) no-repeat center center;
    background-size: 100%;
    width: 300px;
    height: 300px;
   }

as you can see from the above codes, this 'background-size: 100%;' should make the background image in the div(#bg) fill the whole container of (#bg) but unfortunately, it doesnt work at all even i also tried 'background-size: cover;' or 'background-size: contain;' but still no lucks, nothing works. Is there any way or alternative way that I could make the background image in the div(#bg) full or will fill the container or will stretch proportionally as what the width and height of the div(#bg)?

Answer 1

Actually you are forgetting a parameter in your property declaration

Demo

background-size: 100% 100%;

Explanation: You are using background-size: 100%; which will suffice only for x and not for y so you need to have 2 100% , 1 for the x and other for y

Answer 2

Well, you have this solution background-size:100% 100%;

But it doesn't work in all browsers, if you want the fix for IE8,7 and 6 (I think) you ca try this:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale')";