Question

I have an image with the dimensions 36px (height) and 32px (width). I’m accessing the first and last 5 pixels with

background-position: 0 0;
background-position: -26px 0px;

These are put into two different divs with a width of 5px. Altogether I have three divs (left, middle, right)

I now want to use the middle part of the image to repeat itself with a width of 280px. However, I only want to access the image region in between 6px – 26px.

IMAGE:

5px     22px    5px
=== =========== ===

What I want css to do:

DIV

5px                  280px                       5px
=== ============================================ ===

Note: The 280px are only the region of 22px repeated along x in the image above!

Answer 1

You’ll have to change the layout of your sprite to something like the following:

-----------------------
-Left Part  Right Part-
-     Middle Part     -
-----------------------

This way, you would change the y co-ordinate for the middle part of the background-image and it should repeat succesfully.

This is because you cannot repeat a specific part of a background-image. The width/height would have to be fixed in this case, as once you repeat a part, you would see the other parts of the sprite.