Repeating a section of an image in CSS

Question

I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.

In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.

Does anyone have any idea how I could do this in CSS?

Answer 1

Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.

_{(source: sampsonresume.com)}

This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.

Answer 2

You might be able to achieve this effect using the CSS3 border-image property.

Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.

Steve