Background Image Problem

jaiesh_bhai · 07-20-2011, 02:41 AM

I cannot seem to get the background image to work for Firefox like it does for chrome and IE. Anyone know why this happens?

Website: lidoscolumbus.com

djh101 · 07-20-2011, 05:18 AM

For future reference, add http:// in front of your URL or use the link tags so that it is clickable (much easier to access).

background-size is a newer property that is not supported in older versions of Firefox. In other words, you can't have a variable sized background image. However, it is possible to simulate a background image with a fixed, z-indexed image. Something like the following:

HTML:

Code:

<div id="my-bkg-img"><img src="http://2.bp.blogspot.com/-03LnaUK9Ud8/TcZC3knAoZI/AAAAAAAAAxc/QRm7Pp5cx-o/s400/Penguins.jpg" id="my-bkg-img" /></div>

CSS:

Code:

#my-bkg-img {
height: 100%;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}