0

I want to create a web page background image that fills the entire background, without distorting the image and changing it's proportions.

You can see a great implementation of this on LaunchRock's pages, and on their homepage, for example.

I saw this question on StackOverflow however if you play around with what that produces you'll see that the background image is 100% height and 100% width which means that the original proportions of the photo are not maintained and the image is stretched.

Notice in the LaunchRock example that if you resize your browser window the image grows proportionally and always fills the entire window (no matter what size window or background image they use).

If the browser window is not wide enough it crops the sides of the background image (keeping the image centered and cropping the left and right sides) and if the window is not high enough it crops the bottom part of the background image.

No matter what size the browser window is, the image height/width ratio is maintained and the entire background is filled.

I'm guess this can't be done with pure CSS, some JavaScript may be needed. Any ideas?

Thanks

Community
  • 1
  • 1
Guy
  • 317
  • 3
  • 16
  • Please search before posting http://stackoverflow.com/questions/7259084/css-perfect-full-screen-image-background – SVS Jun 26 '12 at 10:46

4 Answers4

2

It is done with CSS only, like this:

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

Things that make it possible:

  • CSS property background-size set to cover and its vendor prefixed versions
  • using a background-image that fades to black on the sides
  • position set to top center
  • using the fixed property
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • Seems to work perfectly except when I have the html and body 100% I get weird scrollbars in Firefox – Guy Jun 26 '12 at 11:08
  • 1
    @Guy: Looking at launchrock again, you don't need the 100% height, but definitely set the `margin` and `padding` on `html` and `body` to `0` – Moin Zaman Jun 26 '12 at 11:09
1

If you don't mind using jQuery, you might give http://srobbin.com/jquery-plugins/backstretch/ a try.

gherkins
  • 14,603
  • 6
  • 44
  • 70
1

Example: http://jsfiddle.net/rPhLa/

You have to set:

 html,body{ height:100%; width:100%; }

So they occupy the whole screen, then for the background:

body { background-image: url(http://launchrock.com/images/back.jpg); background-repeat: no-repeat; background-position:center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }​
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • This worked except in Firefox I got weird scrollbars when I added the height:100%; width:100%; – Guy Jun 26 '12 at 11:08
1

the LaunchRock's page, that you spent as example, uses a CCS3 property: background-size. This is the property that do the 'magic' of scale.

More about background-size: http://www.css3.info/preview/background-size/

  • Don't forget to see the browser support for this property.

It is quite likely that this can be done with javascript and even just using CSS2. Sorry, I don't have an example in the hands now.

Joao Bueno
  • 76
  • 4