Multiple Backgrounds with CSS 2.1
Read the article: Multiple Backgrounds and Borders with CSS 2.1.
Fluid faux columns without images. Source independent. The use of rgba background is only to show the area of each box. No problem putting links in the content ( #non ). The markup for this section looks like this: ---------------------- Supp2: Third in source ---------------------- Sed accumsan neque a nisi luctus volutpat. Quisque placerat nibh ac leo varius non varius lacus cursus. Curabitur bibendum volutpat eleifend. Nullam sit amet dolor massa. Nunc consectetur ornare purus, et euismod nunc cursus at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec aliquet leo nec quam vestibulum non mattis odio dapibus. Curabitur consequat odio odio. Proin a justo at lorem ultricies hendrerit. Sed accumsan neque a nisi luctus volutpat. Quisque placerat nibh ac leo varius non varius lacus cursus. Curabitur bibendum volutpat eleifend. Nullam sit amet dolor massa. Nunc consectetur ornare purus, et euismod nunc cursus at. Vestibulum ante ipsum primis in faucibus orci. Dribbble style buttons without images ( http://dribbble.com ) This example uses one element and one image (a sprite). Using pseudo-elements for additional background-images lets you clip sprites and fake the positioning of a background image from any side (not just the top and left). [content] Images that break out of the box are a popular effect. This is easy to achieve with pseudo-elements. No need for images in the markup, nested elements, or empty elements. Depending on the look you're after you can absolutely position or float the pseudo-element. This technique gives you a lot of flexibility over the positioning of presentational imagery. They can be part of the normal flow; or content can flow around them (float); or they can be removed from the document flow entirely and positioned from any side (absolute/fixed positioning). This example floats the pseudo-element so the main content's text will wrap around this image. [content] [content] An element with the popular folded-corner effect (with CSS only), two background images, and a generated-content image. P.S. Don't let your designer friends see my comic sans [content] You can find me on twitter ( http://twitter.com/necolas ). Multiple Backgrounds and Borders with CSS 2.1. You'll have to view the CSS file because Firebug won't show pseudo-elements.Nicolas Gallagher
********************************* Multiple Backgrounds demo for Silverback ( http://silverbackapp.com/ )'s parallax effect with more gorillas. [content] --------------------- Main: First in source ---------------------
Fit for purpose
Resize your browser. How wide am I?
Only one element to reproduce Silverback's parallax effect with more gorillas.
<div id="silverback">[content]</div>