0

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)?

Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
  • see possible duplicate here http://stackoverflow.com/questions/5662735/stretch-background-image-css?rq=1 – DRC Jul 06 '13 at 13:03

2 Answers2

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • yay! it works like charm! brilliant! i been implemented the above answers before but I cant believe i didnt remember it to be my reference in my future works. Thank you so much! – Juliver Galleto Jul 06 '13 at 13:07
  • @JuliverGalleto You welcome :) btw even `cover` works, but it's a different concept, so `cover != 100% 100%` :) – Mr. Alien Jul 06 '13 at 13:08
0

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')";
Seazoux
  • 621
  • 1
  • 5
  • 28