I have an image for a website and I wish to resize it so it covers ANY given screen.

Note:

• I don't want the scrollbars to appear.

• I am trying to resemble something like the following website

  http://frontrow-demo.squarespace.com/

The only solution I can think of was re-sizing the height and width but that makes the scroll bars appear. I am guessing its a CSS solution I am struggling to create.

Edit:

This is the code I tried, but its "Zooming" the pic to make it stretch across the screen. I would like it to resize it so the quality and the actual pic would show up.

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  min-width: 100%;
  min-height: 100%;
}

Use background-size: cover in CSS on the HTML element

<!-- language: lang-css -->

html {
    background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

See this fiddle:

jsFiddle