Apr 18

CSS2 Background Compliant Vignette

We all love the look and feel of vignettes on websites, however short of using CSS3 to display them as a background image, we are stuck using “hackish” CSS2 styling to achieve a 100% width vignette. Since my customers usually demand cross browser compatibility, I have developed a CSS2 compliant way of achieving a 100% width vignette. To do this, you’ll need to break up your vignette into 3 images. The left, middle, and right.

Left Vignette

Left Vignette


Middle Vignette

Middle Vignette


Right Vignette

Right Vignette

Once you have your vignette properly broken up, time to insert your vignette into your CSS.

body {
    background: url('images/bg/Header_Left.gif') no-repeat 0 0,
    url('images/bg/Header_Right.gif') no-repeat 100% 0,
    url('images/bg/Header_Middle.gif') repeat-x 30% 0;

Your website should have a vignette similar to this:
Full Vignette

This is only required if utilizing multiple background images. If your vignette is the only background image you need, simply use CSS: body { background: url(‘my-vignette.gif’) no-repeat; }

Tested on Internet Explorer 9+, Firefox 5+, Chrome 12+, Safari 5+
For IE8 and lower, sorry folks your stuck only using the “hackish” absolute/relative positioned <img /> tags.

Comments/questions please reply.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>