Creating Striped Backgrounds With CSS or Images

How to Create 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 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.

Once you create the stripe pattern and color scheme you like, head over to https://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: