Large Website Backgrounds Do’s and Don’ts
Large backgrounds make a very impressive visual impact on websites. A web designer has the possibility to play with different design variables that are usually used by photographers, such as depth of field or focus. The background does not have to be just photos, but also any other large illustration or even video.
How to: CSS Large background
Don’t neglect large resolutions and resolutions on which you can’t test the website. You can use services such as Browsershots to test your website using different screen resolutions, browsers, etc.
Perfect Full Background Image
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
Design floating pages using large fixed background images
BACKGROUND IMAGES ARE an integral element of the web design process. They provide a one-step process to creating immediate and beautiful graphics. Typically, they are used as repeating backgrounds to compensate for screen resolutions, header and background graphics in blogs and the basis for buttons, tabs and boxes. This tutorial is going to go beyond standard practice and demonstrate how to use a single large background image and add the fixed attribute to keep it static. The background image is placed within the body tag which means that any div tags will effectively float above the background. When the scrollbar is called into action the content of the page scrolls up and down as normal but the background image remains in place. Finally, with the creative use of anchors and section headers, users get to jump to the desired section with the logo always on display.