Cool fast pattern backgrounds

An idea for backgrounds out two small image files.

[jackherbert]

Hello world!
I thought of this idea, might not be the first and I was inspired by the Xfce background tool.

First, imagine a page background made of a pattern, just a small jpg file set on repeat in the body with this voodoo:

body {background: #FFF url(a_small_pattern.jpg) center center fixed repeat;}

I love stripes and you can do great ones with a 1px height image, but any pattern will do.

Then imagine another image, a png file this time because we need transparency. The size doesn't matter too much but let's keep it small for bandwidth's sake, say 320px by 240px. This image is very simple, a radial gradient going from totally transparent in the center to half opaque on the edges.

You then pop it in its own div with this style black magic:

#the_div {
position:fixed;
top:0;left:0;
width:100%;height:100%;
background-image:url(lay.png);
 -moz-background-size: cover;
 background-size: cover;
z-index:-10;
}

And here you go, you got yourself a smart full screen background, repetitive alright, but not too repetitive and for just a few Kbytes!

Okay it doesn't work well with opera and I bet it doesn't work at all in IE, but hey, what do you guys think?

[milosevic]

That's an interesting idea - worth remembering, shame it doesn't work in IE though! Maybe there's a way to get around that - Does it not work in all versions of IE?

On a similar line, I wrote this wacky CSS3 rainbow BG for Firefox a few weeks ago:

background:-moz-repeating-linear-gradient(right top, purple 20px, indigo 80px, blue 120px, green 160px, yellow 200px, orange 240px,red 290px, purple 320px);

It uses maybe too much CPU at the moment to go on a live site but I think it's pretty cool and worth sharing :) Try applying it to the body on a user stylesheet for Webmaster World for a laugh and to brighten up your working day :)

[jackherbert]

Woa! this rainbow looks brilliant, I'm definitely gonna try to combine both ideas (: