CSS autosize background image?

Question

This is probable one of the most basic questions on this website, hence I expect some quick answers. When I try to set a background image for my website I edit the image in paint and I constantly have to edit the image pixel for pixel in order to make the image cover up every single area of the website. Is there any standards or html codings that can automatically set resize the image to the exact size of the website?

Answer 1

You need to do something like this:

/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
    height: 100%;
}

/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("your_image.jpg");
}

Also, consider using -moz-, and -webit- prefixes to make sure it works in older browser versions of webkit and gecko based browsers.

Answer 2

In your CSS stylesheet you can use the following code (where images/bg.jpg is the path for your background image)

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Works in: Safari 3+, Chrome, IE 9+, Opera 10+, Firefox 3.6+

Answer 3

Are you familiar with css? Add the background as image:

<img src="yoursource.png" class="yourclass" />

and use this css snippet:

.yourclass {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100; /* puts image into the background */
}

Answer 4

I'm assuming you're setting the background image on the body but if not you should be. use background-size: cover; which will stretch the image to fit