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

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

Answer 2

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 3

If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.

The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.

Answer 4

CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.