Plaid body background with CSS

Background gradients are pretty freaking cool. A while ago I was playing around with background gradients in CodePen and I came up with a CSS only plaid body background with a little noise. I have no idea where you would use this, it’s pretty ugly, but I think it shows what can be done with background images and gradients. Here’s the explanation.

view demo

*Note: In the example I’m using LESS just to set the color values so that the background gradients are easier to read and write. I’m also just using the webkit prefix to make for a cleaner example. You’ll need to add the other vender prefixes. Awe, cleaner code. 

On the body selector your just gonna use three properties; background-color, background-image and background size. Set the background color to the desired color you want. We’ll be using rgba color values to achieve the overlapping plaid look so an overall background color we’ll need.

1
2
3
4
5
6
7
8
9
10
11

/* LESS variables to set color values */

@cl: rgba(0, 96, 170, 0.5);
@dkcl: rgba(0, 72, 127, 0.5);
@lt: rgba(256, 256, 256, 0.4);
@dk: rgba(0, 0, 0, 0.4);

body {
background-color: @cl;

}

Next we’ll build the horizontal stripe. To do this, just build a linear background gradient that has sharp start and stopping points. Just use the same percentage values on each color change… From 0-10% I’ll set the first color, 10%-15% the next color, 15%-30% the next and so on… like this:

1

background-image: -webkit-linear-gradient(top, @cl 0%, @cl 10%, @lt 10%, @lt 15%, @cl 15%, @dkcl 15%, @dkcl 30%, @lt 30%, @lt 35%, @cl 35%, @cl 60%, @lt 60%, @lt 65%, @dk 65%, @dk 80%, @lt 80%, @lt 85%, @cl 85%, @cl 100%, );

Use ‘top’ at the beginning of this linear gradient to set the horizontal position. Now, we’ll build the vertical stripe the same way by adding the new set of linear-gradient values to our background-image property (use comma to separate both sets of linear-gradient values). Only this time set to ‘left’ for vertical alignment. Here’s the complete background-image property.

1

background-image: -webkit-linear-gradient(top, @cl 0%, @cl 10%, @lt 10%, @lt 15%, @cl 15%, @dkcl 15%, @dkcl 30%, @lt 30%, @lt 35%, @cl 35%, @cl 60%, @lt 60%, @lt 65%, @dk 65%, @dk 80%, @lt 80%, @lt 85%, @cl 85%, @cl 100%, ), -webkit-linear-gradient(left, @cl 0%, @cl 10%, @lt 10%, @lt 15%, @cl 15%, @dkcl 15%, @dkcl 30%, @lt 30%, @lt 35%, @cl 35%, @cl 60%, @lt 60%, @lt 65%, @dk 65%, @dk 80%, @lt 80%, @lt 85%, @cl 85%, @cl 100%, );

Before we add the noise, we’ll still need to set the background-size of our body…. bigger stripes = bigger background size… smaller stripes = smaller background size. In the example I’m just setting the background size to 150px 150px.

To add noise and make it look more like fabric, we’ll use the body:after pseudo element, add some blank content, position it absolute and add noise the same way we built the plaid stripes, only this time use a bunch of  radial-gradients and differing background sizes that correspond to each radial-gradient. Here’s the code to bring the noise:

1
2
3
4
5
6
7
8
9
10
11

body:after {
background-image: -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em);
background-size: 30px 30px, 25px 25px, 20px 20px, 15px 15px, 10px 10px, 15px 15px, 5px 5px;
bottom: 0;
content: "";
left: 0;
opacity: 0.2;
position: absolute;
right: 0;
top: 0;
}

Here is the complete CSS snippet for creating the plaid body bg: (you can also grab that from CodePen here: http://codepen.io/pcridesagain/pen/hysoi)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@cl: rgba(0, 96, 170, 0.5);
@dkcl: rgba(0, 72, 127, 0.5);
@lt: rgba(256, 256, 256, 0.4);
@dk: rgba(0, 0, 0, 0.4);

body {
background-color: @cl;
background-image: -webkit-linear-gradient(top, @cl 0%, @cl 10%, @lt 10%, @lt 15%, @cl 15%, @dkcl 15%, @dkcl 30%, @lt 30%, @lt 35%, @cl 35%, @cl 60%, @lt 60%, @lt 65%, @dk 65%, @dk 80%, @lt 80%, @lt 85%, @cl 85%, @cl 100%, ), -webkit-linear-gradient(left, @cl 0%, @cl 10%, @lt 10%, @lt 15%, @cl 15%, @dkcl 15%, @dkcl 30%, @lt 30%, @lt 35%, @cl 35%, @cl 60%, @lt 60%, @lt 65%, @dk 65%, @dk 80%, @lt 80%, @lt 85%, @cl 85%, @cl 100%, );
background-size: 150px 150px;
}

body:after {
background-image: -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em), -webkit-radial-gradient(@cl 0px, transparent .1em);
background-size: 30px 30px, 25px 25px, 20px 20px, 15px 15px, 10px 10px, 15px 15px, 5px 5px;
bottom: 0;
content: "";
left: 0;
opacity: 0.2;
position: absolute;
right: 0;
top: 0;
}

About the author

Patrick Cox wrote 98 articles on this blog.

Patrick is a UX Designer and the co-creator of Payba.cc and Aplethora (a two man interwebs design firm). He also enjoys family, snowboarding, sports and sugar free water mix ins and.... this is his blog.

5 comments