Categories: Website Design & Development, WordPress222 words0.8 min read

Creating Striped Backgrounds With CSS or Images

Home>Website Design & Development, WordPress>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 and create a matching image to use for Internet Explorer.

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

#container1 {
 -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)));
 -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-image: url(.../images/stripes.gif);
 background-repeat: repeat;

Here’s the sample changes to the page code:

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

Explore More Articles

Share This, Choose Your Platform!

Let’s Do Something Great Together

Doing something great comes with a secret – getting started. Getting started requires a conversation. So let’s talk. Let’s talk about how to accomplish the things on your list so you can drive more traffic, increase revenue, accomplish your goals, and then do more great things.

Let’s Talk

"*" indicates required fields

This field is for validation purposes and should be left unchanged.