Grow your CSS skills. Land your dream job.

[Solved] Sprite repeat-y woes

  • # October 28, 2009 at 1:08 pm

    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

    # October 28, 2009 at 9:52 pm

    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.

    # October 28, 2009 at 11:52 pm

    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.

    # October 29, 2009 at 12:54 pm

    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 (:

    # October 29, 2009 at 1:53 pm

    Your links are still showing the images with the shadows on all 4 sides. Each image really should be the same width as the div it is supposed to fill, which in this case I’m guessing is 600px ( I just measured yours at 590px each).
    Having said that it should work something like this:
    html:

    Code:

    content and such

    css:

    Code:
    #content {
    background: url(path to image) repeat-y -620px 0;
    float: left;
    width: 600px;
    }

    #top {
    background: url(path to image) no-repeat 0 0;
    float: left;
    width: 600px;
    }

    #bottom {
    background: url(path to image) no-repeat -1220px bottom;
    float: left;
    width: 600px;
    }

    NB. Background positions are approximate as I haven’t seen the new sprite and I’m guessing the width should be 600px. Any padding should be added to the contents of the div and not the div itself.

    # October 29, 2009 at 5:43 pm

    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

    # October 30, 2009 at 6:47 am
    Quote:
    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

    You don’t need to put an extra div inside, just put the padding on the <p> or whatever.
    Doesn’t matter how many times you declare the background image, that’s the whole point of using a sprite, after the first call it will be cached by the browser.

    # October 30, 2009 at 5:30 pm

    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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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