red_ice Registered User


Im taking apart my portfolio site design to build for the web... I have a repeating grunge background (2k + pixels resized to about 400x400) which I could repeat in css, but i want to also have it come over the text area..

Sounds tacky alright... I could do a repeating background and just hope everything lines up when its built, but before I go ahead im just wondering if its possible for this to be done with css? There are animated features on the site, so the patterns will be moving, this will take away from the effect!

So instead of the repeating pattern being done with body, i have a new id which just layers on top of the full size of the screen so it covers the text aswell?

It could really make or break the design imo.

Any advice would be good!

N.B. This is purely being built for the latest browsers and atm IE can get the boat, ill worry about IE when i have it working in firefox.



It'd help to have an image to look at, I'm not sure what you're trying to do.
What you could try is repeating it as the body bg, but having the content area background mask it off with a solid colour using various transparent PNGs... that way you're not worried about things lining up?


I don't really know what you're trying to do either to be honest. Got a link or a jpg to explain?

red_ice Registered User

at the moment the design is clean. Im trying to age it. So in photoshop i created a new layer at the top of the layerstack, painted over it with something like this, then set the opacity to 20% or something.

So the whole design looks a bit aged...

So i could copy the merged design, break it up and build it in html with the pattern flattened to each image.. Im seeing if its possible to build the site without it, and apply it as if it was a new layer in photoshop. Ya get me?

The site looks alright without it tbh, I'd just like it to be there tbh!


It can be done very easily by floating a semi transparent layer on top of your whole page but you will have issues with links underneath it in some browsers.

You could just build it into the background though and not have it cover your text.

Placebo Registered User

So you want a grunge background but you're afraid the text wont be readable !?
Dont quite understand what you're getting at ? You could do the background as normal, repeat a slice x/y and then have a a different background associated with elements where the text resides, i.e same as your background but say only 10% opacity grunge.

Not sure what you mean really, that might come across inconsistent


He wants to overlay a semi transparent layer on top of all the content. So it's not really a background.

Giblet Registered User

You might have issues clicking anything then...

Want to share your thoughts?

Login here to discuss!