Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Offsetting one background image in CSS3

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 30, 2012 at 11:14 pm #40534
    rickgregory
    Participant

    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 #112997
    Paulie_D
    Member

    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 #113002
    Paulie_D
    Member

    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 #113043
    rickgregory
    Participant

    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.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.