CSS Background Patterns: examples

Last updated:

A striped background may be just enough if you're feeling a little bit rebellious but, being a programmer and not a designer, you know that you shouldn't innovate too much on designs =).

To make a simple striped background like this:

pink striped background

just use this (all browser variations included):

body {
    /*base colour*/
    background-color: #FF1975; 
    /*these control the width of the stripes*/
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px; 
    background-image: 
      -webkit-gradient(linear, 0 0, 100% 100%,
      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
      to(transparent));
    background-image: 
      -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
    background-image: 
      -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
    background-image: 
      -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
    background-image: 
      -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
    background-image: 
      linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);  
}

sorry about the length but it's quite simple, just copy paste and try it out. If you've worked with gradients before, you know that each browser requires specific instructions.

With only a little tinkering, you can do some variations like these:

green stripes vertical orange stripes checkers

The key word here is superposition. If you, say, take an empty background and place a 45º blue gradient and then a -45º red gradient on top of it, you'll end up with this:

red and blue on an empty background

this is the code I've used(I'm only using webkit's version, you can adapt it to your target browser)

body {
    background-color: none;
    background-image: 
      -webkit-linear-gradient(45deg, blue 25%, transparent 25%, transparent 75%, blue 75%, blue),
      -webkit-linear-gradient(-45deg, red 25%, transparent 25%, transparent 75%, red 75%, red);
    background-size:15px 15px;
}

This was largely based upon Lea Verou's post on css patterns

Dialogue & Discussion