CSS body background image fixed to full screen even when zooming in out

Question

I am trying to achieve something like this with CSS   I d like to keep the body background image fixed on fullscreen  this is sort of done by the following code   body       background  url    img beach jpg  no-repeat fixed 100  100       Now I can verify the window is indeed filled up with that image  at least this works on my Firefox 3 6  However  it screwed up when I tried to zoom in out  ctrl -     the image just is stretched shrinked as the page zooms   Is there a better way of doing this purely with CSS  I didn t find a good property for the background-image   Or should I start thinking about jQuery to manipulate the width and height on the fly  They were both set to 100  so I reckon that should work  as always      Thanks for any suggestion in advance

User · Answer

Here is the simple code for full page background image when zooming you just apply the width 100  in style css thats it  position absolute  width 100

User · Answer

You can do quite a lot with plain css   the css property background-size can be set to a number of things as well as just cover as Ranjith pointed out   The background-size  cover setting scales the image to cover the entire screen but may mean that some of the image is off screen if the aspect ratio of the screen and image are different   A good alternative is background-size  contain which resizes the background image to fit the smaller of width and height  ensuring that the whole image is visible but may lead to letterboxing if the aspect ratios are different   For example   body         background  url  images bkgd png  no-repeat rgb 30 30 30  fixed center center        background-size  contain           The other options that I find less useful are  background-size  length  lt widthpx gt   lt heightpx gt  which sets the absolute size of the background image  background-size  percentage  lt width gt   lt height gt  background image is a percentage of the window size   see w3schools com s page

User · Answer

there is another technique  use  background-size cover   That is it full set of css is   body        background  url  images body-bg jpg   no-repeat center center fixed      -moz-background-size  cover      -webkit-background-size  cover      -o-background-size  cover      background-size  cover       Latest browsers support the default property

User · Answer

Use Directly like this   bg-div       background  url    img beach jpg  no-repeat fixed 100  100       or call CSS separately like   bg-div      background-image  url    img beach jpg       -moz-background-size  cover      -webkit-background-size  cover      -o-background-size  cover      background-size  cover

User · Answer

Add this in your css file    custom class        background-image  url    img beach jpg       -moz-background-size  cover      -webkit-background-size  cover      -o-background-size  cover      background-size  cover       and then  in your  html  or  php  file call this class like that    lt div class  custom class  gt          lt  div gt

User · Answer

I ve used these techniques before and they both work well   If you read the pros cons of each you can decide which is right for your site   Alternatively you could use the full size background image jQuery plugin if you want to get away from the bugs in the above

[css] CSS body background image fixed to full screen even when zooming in/out

Examples related to css