Home > CSS, Design > Creating “jeans effect” background on your website

Creating “jeans effect” background on your website

Greeting everyone,

Today I’ll show you how to make little graphic design on your website, using a background mosaic that will look like jean. In another word, pretty cool :p

1st of all, you need a good graphic software to create a 5×5 pixels image.

GIMP or Photoshop should do the thing.

Go to File -> New and create an empty 5 x 5 pixels images. (RVB transparent)

Pick up 2 colors, for instance light blue (#71a0f6) and dark blue (#004ebc). Make sure the color are not too different, otherwise the effect will look weird…

Use the pencil to draw a canvas area that should look like this.

Save it as “jeans.gif”.

Now it’s time to use it on a website using custom CSS.

body {
 background:url("/img/jeans.gif") repeat scroll 0 0 #fff;
 margin:0;
}
Et voila !
Categories: CSS, Design Tags:
  1. Court
    June 24th, 2010 at 19:10 | #1

    Excellent. I just styled my webpage using your trick.

  1. No trackbacks yet.
*