How to add image as background?

Question

How to add image as background?

Navigation

#1 by (3 votes)

2

Instead of the common white background on my site, or instead of setting another background color, I want to set an image as background. I want this still image, not scrolling with the page and adapted to the screen, filling the entire width and height of the main window. About this background I want to put a form, a banner and other information ... always leaving all the content on the background (image). My question is: How do I do this?

html css

asked by anonymous 18.08.2015 / 23:01

1 answer

Debug by the chrome of javascript objects Error when trying to update in a dialog PrimeFaces

score 3 · Accepted Answer

You have a way to do this only with css, this form of support only for IE 9+ . If it is a still image that will be permanently there, you can leave it in the body (or the container tag of your site) as follows:

body{
  background: url('sua-imagem.jpg') center center no-repeat fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Using the css3 cover, the image will automatically adjust to the size of your screen.

If you need to support older browsers, the solution will be to javascript grab the screen size and set the image div to see how long it should be.