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:


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

  • Recent Posts
Creative Development and Marketing Director , QAT Global
is the Creative Development and Marketing Director at QAT Global. She has over 20 years of proven success leading corporate marketing, communications, IT, and business strategy development. Karie is responsible for driving creative strategy and execution to develop and produce quality creative technology and marketing solutions that meet internal and external client’s business objectives and goals.
follow me