Repeat-y Sprites

HTML & CSS
1

Hi,

I’m trying to convert these into a CSS sprite:

#menu{
	width:245px;
	float:right;
	margin:15px 0;
	background:url(images/side_loop.gif) repeat-y 0 0;

}

.snip_mid{
	background:url(images/snips_mid.gif) repeat-y 0 0;
	display:block;
	height:1%;
	overflow:hidden;
}

…yet they never seem to work for me (gives weird output)

Can anyone suggest to me how I would go about this?

I was gonna upload the images via http://spritegen.website-performance.org/ , and then edit my CSS - but I’m a little confused as to what I need to do (I can get general sprites working,but stuff with “repeat” never seems to work for me :()

TIA

Andy

2

Typically, as soon as I posted this, I managed to get the #menu one working :wink:

I’m now trying to do the “snip_mid” one

.snip_mid{
/*	background:url(images/snips_mid.gif) repeat-y 0 0;*/
	background: url(./images/csg-4cf7e6ee35d47.png) repeat-y 0 0;
	background-position: -295px 0; 
/*    background-repeat: repeat-y;*/
	width: 251px; 
	display:block;
	height:1%;
	overflow:hidden;
}

The original CSS is:


.snip_mid{background:url(images/snips_mid.gif) repeat-y 0 0;display:block;height:1%;overflow:hidden;}

The sprite image is attached

As you can see, it looks odd here (although its closer than I’ve managed to get previously ;))

http://www.mywebsitedesignersblog.com/2010/11/cookies-in-jquery/

Its the bit on the top - the boxes (i.e “Recent Posts”)

As you can see, it shows up as “lines”, when in fact it should be a central color

Any suggestions are much appreciated :slight_smile:

Cheers

Andy

3

.snip_mid{background:url(images/snips_mid.gif) repeat-y 0 0;display:block;height:1%;overflow:hidden;}

height: 1%

you are making a box 1% high? That doesn’t sound very high to me. Especially when coupled with overflow: hidden.

I’ll bet your image is a lot taller than 1% high. And that it’s getting cut off.

4

Hi,

Thats what it had in a Wordpress theme =)

I’ve changed it to height:120px; , but still same issue

TIA

Andy