Sprites questions

[Flyer]

Hello. I’m experimenting with sprites and got few problems.
1) Originally, background have code

body {

font-family:Arial, Helvetica, Tahoma, sans-serif;

font-size: 62.5%;

text-align:center;

background: #222 url(images/back.png) repeat top left;

color: #aaa;

}

But I want it from sprite. In sprite this pic is 60×60 px and at -172px -177px postions
How should i write it down in css? No matter how I try it looks messed up.
2) I have style that originally takes 1×1 px pic as background, but i want it to take this pic from sprite. Here is style

#title_box

{

display:block;

background-image:url('gray.png');

height: 29px;

width: 195px;

}

This 1×1 pic is on -348px -5px positions in sprite. How should i write it down?

[chrisburton]

@Flyer – Without seeing exactly what you’re doing, I’m not sure I can help you 100%. Normally it would be something like this

width: 60px;

height: 60px;

background: url('gray.png') -172px -177px no-repeat;

You can use http://spritecow.com to upload your sprite and click on each image to give you the correct code.

[Flyer]

you got me wrong :)
First one
bo

dy {

font-family:Arial, Helvetica, Tahoma, sans-serif;

font-size: 62.5%;

text-align:center;

background: #222 url(images/back.png) repeat top left;

color: #aaa;

}

it takes picture and makes background by repeating it. this picture was separate file.
now, what i’m trying to do.
i placed this picture in file with other file (sprite). Part of sprite that have pic needed for background is on -172px -177px positions and have size 60x60px. So what should i write instead of

background: #222 url(images/back.png) repeat top left;

to have picture take from sprite and then displayed correctly?

Second question is:
I have style

#box

{

width: 195px;

height: 142px;

border: 3px solid rgb(78, 77, 77);

margin: 3px;

}



#title_box

{

display:block;

background-image:url('gray.png');

height: 29px;

width: 195px;

}



#title_text

{

display:block;

font-size: 9pt;

font-family: Arial, sans-serif;

color: #EBEBEB;

margin-left: 2px;

padding-top: 7px;

}



#number_box

{

display:block;

background-image:url('gray.png');

height: 29px;

float: right;

width: 50px;

margin-top: 91px;

bottom: 0px;

}



#number_text

{

display:block;

color: #EBEBEB;

text-align: center;

font-family: Arial, sans-serif;

margin-top: 3px;

font-size: 15pt;

}

which in html looks like

Test



13

and produces
http://i43.tinypic.com/6zmryd.jpg
since older ie don’t understand rgba, i’ve decided to use 1×1 semi transparent gray picture as background for 2 boxes you can see on pic under “test” and “13”. Now I want to take this 1x1px pic from sprite instead of separate file. So what should i write in #number_box and #title_box to do it?
Hope i explained it well enough :)

[chrisburton]

Can you provide an image to the end result of what you’re trying to accomplish? I’m having a hard time understanding you.

[Flyer]

for first it’s just repeating background from part of sprite, for 2nd question i did provide it

[chrisburton]

Okay, from what I understand, you want to repeat a 1px by 1px image sprite to the background of a div. I don’t think that can be done.

[Flyer]

ok, tnx
thought as much though

[Author]

Posts