Question

Is there a way to take a DIV that has a background image on it, then apply a CSS3 gradient on it to simulate a lightsource?

The reason I ask was because I was thinking of making the BODY tag on a page use a repeating background pattern, apply the CSS3 gradient lightsource on it, and then stick a white DIV on top of that where all the page content would go.

For those without CSS3, it would degrade nicely into just a white DIV on top of a repeating background.

Answer 1

To do this just on the body element you’ll have to combine multiple backgrounds, RGBA and radial gradients. You’ll need a default property with a single repeating background for those browsers that don’t support gradients, then Gecko and Chrome/Safari have different syntax for the gradients so you’ll need a property each for them. Should end up with something like (untested):

body {
    background: url(repeat.jpg);
    background: -moz-radial-gradient(100px 100px, ellipse farthest-corner,   white 0%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0.5) 25%) no-repeat, url(repeat.jpg);
    background: -webkit-gradient(radial, 100 100, 200, from(#fffff), to(rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.5)) no-repeat, url(repeat.jpg);
}

You may find adding a wrapper element for your lightsource is less effort in the long run.