(Close to) Perfect Full Page Background Image21 August 2009, 3:34 amWe visited this concept of re-sizeable background images before… but reader Doug Shults sent me in a link that uses a really awesome technique that I think is better than any of the previous techniques.
This technique and the above background image is credited to this site. Here is what this technique is going to accomplish:
Fills entire page with image, no white space
Scales image as needed
Retains image proportions
Image is centered on page
Does not cause scrollbars
Cross-browser compatible
Isn’t some fancy shenanigans like Flash
View Demo Download Files
This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image. This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals.
And the CSS:
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
That’s quite a little load of markup and CSS, but it does the trick very well! Just doing this alone gets the job done, but what about if we want actual content on the page. Setting that overflow to hidden on the html and body elements should scare you a little bit, as that will totally cut off any content that is below the fold on a site with no scrollbars. In order to bring back scrollable content, we’ll introduce another wrapper. This one will sit on top of the background, be the full width and height of the browser window, and set the overflow back to auto (scrollbars). Then inside of this wrapper we can put content safely.
#cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}
.box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 Georgia, Serif;
}
UPDATE: Compatibility
Works in IE 7 & 8
BUG: FF 3.5, if you press the “space” bar, some weird scroll down happens.
BUG: In Safari 4 & Chrome, the min-height isn’t catching and doesn’t resize vertically to fit.
IE 6, there is a bit of MooTools the original site uses to get the job done.
Got solutions? Please let me know and I’ll update this.
Design should never say “look at me” it should say “look at this.” Read more Quotes on Design.
Source: CSS-Tricks
Author
Topic: CSS Tricks: (Close to) Perfect Full Page Background Image (Read 1295 times)