Css sprites and repeat

hi everone, i am starting to work with css sprites on my new website and i have some problems with repeat-x part of the png image

the html:
http://sware.co.il/exp/index-new.html

the css:
http://sware.co.il/exp/css/main2.css

the image:
http://sware.co.il/exp/images/bar-background2.png

some one have idea how i can pix it? my work type is correct?
or maybe repeat with “css sprites” cant be doing?

Hi,
The problem is with your sprite image. The repeat-x portion in the middle of your image is only 1px wide while the total image is 32px wide.

It is giving you the 31px gaps as it repeats. Just make that middle section the full 32px width and you should be fine. :wink:

hi thanks,

sprites can only be done with ul li list?
i dont know if its good idea to us ul li list in the bar on my site

No, they don’t have to be lists. That is what is common because the sprites change position when you hover on a link.

The basic principle of a sprite image is that it contains all aspects in one image to save server requests.

Your right, you really don’t want to use a UL for a header div. You could just nest and float (or Absolute Position) two empty elements left and right in your header for the side caps. It is just a matter of setting the BG positions for their background image.

thanks again

  1. you just say left and right div’s what about the center div?
  2. so what your recommend to do?
  • 3 div’s with same image and different BG positions
    or
  • 3 div’s with differnet images
    ?

thanks

  1. you just say left and right div’s what about the center div?
  1. so what your recommend to do?
    You don’t need a center div, that would be the middle portion of your image repeating on the header div itself.

<div id=“header”>
<div id=“left”></div>
<div id=“right”></div>
</div>

  • 3 div’s with same image and different BG positions
    Yes, that is the whole point of using sprites (one image) :slight_smile:

Get your image fixed and I will help you knock the code together.
^ EDIT:
Make your Image a height that is divisible by three. It is 677px tall right now.
Either make it 675 or 678px tall so the three sections will be equal heights.

done the fixed image is up. (trying to change css but not working yet)

maybe its a better idea to put all the repeat images along (i have only 2 repeat images in this page)
and 1 more image with all the other images (i have like 10 images in this page)

so it will be only 3 http reqest’s

what your think?

EDIT
its 675 now, but i dont understand why

Here is an example with the 675px tall image that assumes each section is 225px tall.

3 x 225 = 675

Your three sections don’t appear to be equal though so my BG positions are a bit skewed.
( I had to make the div 220px tall because of the gaps)

You don’t need the 8px gaps between each section. Try again :wink:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sprite Header</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.4 arial,helvetica,sans-serif;
    background:#CCC;
}
h1 {
    margin:.25em;
    font-size:1.5em;
    text-align:center;
}
p {margin:1em}

#header {
    width:60%;
    height:220px;
    margin: 50px auto;
    padding:0 32px; /*space for side caps*/
    position:relative;/*containing block for AP children*/
    overflow:hidden;
    background:url(http://sware.co.il/exp/images/bar-background2.png) repeat-x 0 -228px;
}
#lt-cap {
    position:absolute;
    top:0; left:0;
    width:32px;
    height:220px;
    background:url(http://sware.co.il/exp/images/bar-background2.png) no-repeat 0 0;
}
#rt-cap {
    position:absolute;
    top:0; right:0;
    width:32px;
    height:220px;
    background:url(http://sware.co.il/exp/images/bar-background2.png) no-repeat 0 -456px;
}
</style>

</head>
<body>

<div id="header">
    <h1>Fluid Width Header</h1>
    <p>Lorem ipsum dolor sit amet consectetuer quis a ante Nam odio. Aenean ullamcorper 
    velit aliquam volutpat Nam fermentum Phasellus fringilla ipsum id. Nec Cum elit Phasellus 
    vel a faucibus sollicitudin nec sapien ornare. Quam enim tortor nunc ut accumsan eleifend 
    vel fringilla Nullam eget. Velit aliquam Pellentesque Cum congue.</p>
    <div id="lt-cap"></div>
    <div id="rt-cap"></div>
</div>

</body>
</html>

thanks alot.

what about this:

maybe its a better idea to put all the repeat images along (i have only 2 repeat images in this page)
and 1 more image with all the other images (i have like 10 images in this page)

so it will be only 3 http reqest’s

If you can make on sprite image with all your calculations correct then that’s fine.

Are you understanding why I needed the three sections to be equal heights on that image now?

for now not really (i am still read your code). i you have a good explanation i be glad to read :]

(sorry about the unnecessary explanations(

3 x 225 = 675
Well if each section would have been 225px tall the BG positions would have been as simple as this:

In pixels:

#header {
    background: url(images/bar-background2.png) [B]repeat-x 0 -225px;[/B]
}
#lt-cap {
    background: url(images/bar-background2.png) [B]no-repeat 0 0;[/B]
}
#rt-cap {
    background: url(images/bar-background2.png) [B]no-repeat 0 -450px;[/B]
}

In percentages:

#header {
    background: url(images/bar-background2.png) [B]repeat-x 0 50%;[/B]
}
#lt-cap {
    background: url(images/bar-background2.png) [B]no-repeat 0 0;[/B]
}
#rt-cap {
    background: url(images/bar-background2.png) [B]no-repeat 0 100%;[/B]
}

ohh so all of this is to get a simple calculation

thanks. have a great day :slight_smile: