Creating Striped Backgrounds With CSS or Images

Striped backgrounds can provide a refreshing change from the boring old solids or crazy patterns!  With CSS3, you can create them without using images for Desktop Safari, Google Chrome, Firefox, iPhone, Android, and iPad.  Using CSS3 instead of images helps lighten the page load since you aren’t making any additional calls to an external file for rendering.  You will note though that Internet Explorer naturally doesn’t like to play nice and provide support for for these very complex gradients.  You can work around this situation using conditional comments to have Internet Explorer only load an image to create the background.  Get started creating striped backgrounds using only CSS3 with this great article:

http://css3wizardry.com/2010/08/19/css3-gradients-and-patterns/

Once you create the stripe pattern and color scheme you like, head over to http://www.stripegenerator.com and create a matching image to use for Internet Explorer.

Here’s an example set of  CSS code to get you started:

#container1 {
 background:#e2e2e2;
 background-image:
 -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.15, transparent),
color-stop(0.15, rgba(198,188,175,0.75)), color-stop(0.50, rgba(198,188,175,0.75)), color-stop(0.50, transparent),
color-stop(0.65, transparent), color-stop(0.65, rgba(198,188,175,0.75)), to(rgba(198,188,175,0.75)));
 background-image:
 -moz-linear-gradient(center bottom, transparent, transparent 15%, rgba(198,188,175,0.75) 15%, rgba(198,188,175,0.75) 50%,
transparent 50%, transparent 65%, rgba(198,188,175,0.75) 65%, rgba(198,188,175,0.75));
 -webkit-background-size: 5px 5px;
 -moz-background-size: 5px 5px;
 background-size: 5px 5px;
 }
 /*** For IE 7 and up ***/ #ie7andup #container1 {
 background:#e2e2e2;
 background-image: url(.../images/stripes.gif);
 background-repeat: repeat;
 }

Here’s the sample changes to the page code:


 
……………. ……………….

The following two tabs change content below.

Karie Barrett

Creative Development Director at QAT Global
is the Creative Development Director at QAT Global. She has over 20 years diverse marketing, design, and business experience. Karie is responsible for driving creative strategy and execution to develop and produce quality creative web and marketing solutions that meet internal and external client's business objectives and goals. @KarieBarrett

Latest posts by Karie Barrett (see all)