CSS - sprites as background images

Question

I have a web application whose work I am improving. In an attempt to do this, I decided to use css sprites. I put all my images in a .png file called images.png.

CSS sprites have worked well for all css classes that just render the image once. However, some of my images need to be repeated. For example, I have a banner.png image used for a banner background. Whenever I set the background-repeat property, it seems like the image is not repeating. To show my CSS definitions, here they are:

Before CSS Sprites
------------------
.ghwc {
  background-image: url(/images/layout/banner.png);
  background-repeat:repeat-x;
  color:White;
  width:300px;
}

After CSS Sprites
-----------------
.ghwc {
  background-image: url(/images/images.png);
  background-repeat:repeat-x;
  color:White; 
  background-position:60px 319px; 
  width:300px;
}

My question is: how to use CSS sprites for repeated images like background?

Thank,

Answer 1

My question is: how to use CSS sprites for repeated images like background?

. CSS. , , , , CSS 2 3.

Answer 2

, background-repeat:repeat-x;, , , , . background position x, 0, y- (, background-position:0 0; background-position:0 -100px; background-position:0 -200px; ..). , overflow:hidden.

Answer 3

, (images.png) , . , Opera Firefox,

-: ;

: , , , "", "". , - . , , , .

Answer 4

repeat-x, , x- ( ). . ( , repeat-y. "background-crop" (, CSS4?;))