36: Large Backgrounds

As a best recommended practice use CSS screen-centered large images, above 1700 pixels in width to cover almost 95% of the display sizes available today. The best solution is to blend the images’ corners into the background HTML color, so that users with larger screen resolutions won’t notice it. This eliminates the hard edge if visible. With HTML Frames, you only need to fill one frame so the image size can be reduced accordingly as a percentage of full-screen.

When I’m doing a depth of field (DOF) effect, I’ll blur the background image and use a JPEG quality setting of “1.” Yes. I said “one.” This makes the floating images the emphasis. The top images can be sharp and in-focus –but smaller duplicates or crop of the background image. A repeated image –one fuzzy, one sharp.

How to: CSS Large Background

Backgrounds In Web Design: Examples And Best Practices

Return to Top ▲Return to Top ▲