Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Repeating pattern overlay with css?

  • 20-02-2012 6:18pm
    #1
    Registered Users Posts: 4,946 ✭✭✭


    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


Comments

  • Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    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?


  • Closed Accounts Posts: 34,809 ✭✭✭✭smash


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


  • Registered Users Posts: 4,946 ✭✭✭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!


  • Closed Accounts Posts: 34,809 ✭✭✭✭smash


    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.


  • Registered Users Posts: 8,070 ✭✭✭Placebo


    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


  • Advertisement
  • Closed Accounts Posts: 34,809 ✭✭✭✭smash


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


  • Registered Users Posts: 11,977 ✭✭✭✭Giblet


    You might have issues clicking anything then...


Advertisement