Using the HTML Selector to Skin a Design Cat
The recent article on Web Designer Wall titled How to: CSS Large Background proposes a few ways to achieve large background designs for your website using Cascading Stylesheets (CSS). There is a paticularly good tip in Example 1 for single image backgrounds where the body selector is given values of width: 100%; and display: table; to prevent background shifting on browser resizes in Firefox.
In Example 3 Sky Background a second image is required in the design. The second image was originally achieved by using a #wrapper div, and I agree this is not an ideal situation because this extra div sitting in the Hypertext Markup Language (HTML) is a direct cost of the design strategy. If it could be avoided then that would be great. The div is a generic container and we should trim them out wherever we can’t justify their presence.
The updated solution for Example 3 Sky Background uses a HTML Selector in the CSS, rather than the #wrapper div in the HTML. If that makes sense. It’s a simple enough idea. One image is called into the html selector, and the other is called into the body selector – your CSS file now handles multiple backgrounds and you have leaner HTML markup. It’s important to think laterally when you’re working on design decisions, and the simple solutions work best. Lesson learned.
