How to get a background image to work in CSS and HTML?

Question

I'm sorry for a seemingly foolish question, but I really do need help with this.

I want to create a background image for my website. I made a 1920x1080 background image, and I want it to cover the background on my website. Here is the code a the moment:

html, body {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    font-family: Arial, Helvetica, Verdana, Tahoma, Geneva, sans-serif, Times New Roman;
    font-size: 12px;
    color: #666666
    background: #000000;
    background-image:url(images/background/webbackground.png);
}

When I look at the website after this block of code, it isnt positioned properly. I've tried some background-size: options but I haven't found anything that would work. I also want this background image to change depending on the resolution size of the viewer's monitor.

Can anyone give any tips?

Answer 1

You can use background-size: cover; on newer browsers.

Or follow a fixed position centering / scaling method like so:

HTML:

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Example: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

Reference: http://css-tricks.com/perfect-full-page-background-image/

Answer 2

Try this.

width:100%; background-size:cover;