content and such
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
I see the image is indeed a sprite of top-middle-and bottom of a rounded box.
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.
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:
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 (:
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:
background: url(path to image) no-repeat 0 0;
background: url(path to image) no-repeat -1220px bottom;
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.
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
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".