Grow your CSS skills. Land your dream job.

Offsetting one background image in CSS3

  • # October 30, 2012 at 11:14 pm

    I’ve got a project where the client wants content areas to sit on a paper-like background. The main part is basically solid, the top and bottom edges are torn paper, done as transparent PNG files so that the page background shows through. I thought that I’d use CSS3 multiple backgrounds and after a slight bit of fiddling have the top and bottom edge images placed just fine. What I want to do for the area in between is to use a repeating image that starts at the bottom edge of the top image and stops at or slightly below the top edge of the bottom image.

    And for the life of me, I can’t see how to do this. The top edge image is 50px tall, so I thought I’d define the background-position of the content area to start 50px below the top edge of the div… but that’s not working. background-origin doesn’t seem to work either… The main area image is simply filling the entire div and this appearing as a background to the transparent PNGs at the top and bottom edges.

    I’m probably missing something basic, but I’d love others’ thoughts. Sample page is here: http://sitetherapy.net/clients/grit/?page_id=4

    # October 31, 2012 at 2:14 am

    Basically…you can’t do this…either a background repeats or it doesn’t…there are no half measures.

    You would have to have a extra wrapper div or two with different backgrounds to achieve what you are after.

    # October 31, 2012 at 5:16 am

    Method 1: Wrapping Div: http://codepen.io/Paulie-D/pen/wdFyz

    On reflection, you could also do it this way.

    Method 2: Pseudo elements: http://codepen.io/Paulie-D/pen/jHcGh

    # October 31, 2012 at 12:40 pm

    Ok, thanks. I was thinking that might be the case but haven’t had occasion to play with the CSS3 multiple backgrounds stuff, so I was wondering.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".