How to add image as fixed background?

Asked

Viewed 19,326 times

1

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 image fixed, without moving with the scrolling of the page and adapted to the screen, filling all the width and height of the main window. On 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

1 answer

3


There’s a way to do this just with css, this way of IE 9 only support+. If it’s a fixed image that will stay there forever, you can leave it on the body (or tag "container" of your website) 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 "cover" of css3, the image will automatically adjust to your screen size.

If you need to support older browsers, the solution will be, through javascript, take the screen size and set it in the image div to know how high it should be.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.