Repeating pattern overlay with css? - boards.ie
Boards.ie uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Click here to find out more x
Post Reply  
 
Thread Tools Search this Thread
20-02-2012, 18:18   #1
red_ice
Registered User
 
red_ice's Avatar
 
Join Date: Jul 2000
Location: Dublin
Posts: 5,108
Send a message via ICQ to red_ice
Repeating pattern overlay with css?

Hello!

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.

Cheers
red_ice is offline  
Advertisement
20-02-2012, 18:50   #2
DonkeyStyle \o/
Closed Account
 
Join Date: Oct 2004
Posts: 6,600
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?
DonkeyStyle \o/ is offline  
20-02-2012, 18:55   #3
smash
Registered User
 
smash's Avatar
 
Join Date: Jan 2006
Posts: 24,722
I don't really know what you're trying to do either to be honest. Got a link or a jpg to explain?
smash is offline  
20-02-2012, 19:06   #4
red_ice
Registered User
 
red_ice's Avatar
 
Join Date: Jul 2000
Location: Dublin
Posts: 5,108
Send a message via ICQ to red_ice
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!
red_ice is offline  
20-02-2012, 19:11   #5
smash
Registered User
 
smash's Avatar
 
Join Date: Jan 2006
Posts: 24,722
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.
smash is offline  
Advertisement
20-02-2012, 20:04   #6
Placebo
Registered User
 
Placebo's Avatar
 
Join Date: Sep 2002
Location: Dublin
Posts: 7,976
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
Placebo is offline  
20-02-2012, 20:13   #7
smash
Registered User
 
smash's Avatar
 
Join Date: Jan 2006
Posts: 24,722
He wants to overlay a semi transparent layer on top of all the content. So it's not really a background.
smash is offline  
21-02-2012, 09:33   #8
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,756
You might have issues clicking anything then...
Giblet is online now  
Post Reply

Quick Reply
Message:
Remove Text Formatting
Bold
Italic
Underline

Insert Image
Wrap [QUOTE] tags around selected text
 
Decrease Size
Increase Size
Please sign up or log in to join the discussion

Thread Tools Search this Thread
Search this Thread:

Advanced Search



Share Tweet