Forums

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

Home Forums CSS [Solved] Sprite repeat-y woes

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #26582
    Niall
    Member

    Hola!

    I know it’s possible to use repeat-y on sprites if a bit fiddly (http://www.phpied.com/background-repeat … s-sprites/) but I really can’t get this to work.

    I’m trying to use a pretty background for my content section and I felt it’d be good practice to use sprites.
    I’ve created the sprite with the sections horizontal-ized as the article I linked above says and I can’t for the life of me get it to work. Doesn’t help that it’s not got a fixed height either.

    Any suggestions? Here’s my pre-played-with-page-in-progress: http://niallmeister.byethost6.com/ohrather

    #65985
    dcp3450
    Participant

    its not very clear what your trying to do. you have one image (a white bar with some shading). It’s not sprite, and your not repeating it. Can you clarify what the issue is a little better please.

    #65991
    blue642
    Member

    I see the image is indeed a sprite of top-middle-and bottom of a rounded box.
    http://niallmeister.byethost6.com/ohrather/img/contentbg.jpg
    What you need, is three containers to style, (a top, a middle, and a bottom)

    The top and bottom will need to have the background positioned; while the middle will need posioning and a repeat-y declaration.
    NOTE: your image of the middle needs to remove the shadow or else, you’ll get a banded repeating pattern, where it almost looks zebra striped. (this goes for the shadows on the top and bottom images as well, the shadows that would intrude on the inside portion.

    #66016
    Niall
    Member

    Whoops, sorry. Looking over the post I didn’t really explain anything too well : P

    Blue642’s right, I’ve got the image horizontally layed out into the sections (shadows now fixed, thanks) and I’d like to make it a rounded box. I could avoid hassle and go for border-radius styling but I’d rather it be as browser compatible as possible.
    I’d make 3 divs for this inside the content div right? For instance:

    Code:

    content and such

    Middle of course would be the only class repeated on the y axis to fill the content area.

    Trouble is, nothing I try works. Any example code would be extremely helpful (:

    #66034
    Niall
    Member

    Ooh, I’m getting somewhere now – thanks!
    I must seem like a real idiot with these shadows, I’ve got them fixed properly now – thanks again (:

    So as for padding issues, would I just create a seperate div and place only content inside it? Seems a bit code heavy.
    I would’ve also assumed that redeclaring the background image each time would equal more HTTP requests? Learn something new every day :3

    #66075
    Niall
    Member

    Thanks guys, I’ve got it fixed. I made the top rounded box and bottom rounded box into 1 rounded rectangle and positioned that, and made a bar for the middle which is repeated.

    For the curious: http://niallmeister.byethost6.com/ohrather/

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