I’m trying to give a div a background according to a spritesheet, meaning that it’ll define the parts from the sprite sheet and use those accordingly in the div.
This is my sprite sheet image:
Now I would like to have a “dynamic” div that could get resized and would look similiar to this:
If anybody could help or point me in the right direction that would be appreciated.
This is bad form. You don’t want to do it this way.
If you did do it this way you’d end up with some ugly pixel mess. Plus, I don’t think it’s possible.
You need to split your image into 4 (or more) images.
The first image would be of a corner. We can reuse this corner for the other three corners by rotating the images with some fancy CSS.
transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -webkit-transform:rotate(90deg); /* Safari and Chrome */
If you can’t rely on rotate, then you’d unfortunately need an image for each corner.
Another image you need is a section of the horizontal portion of your border, and you’ll also need one for the vertical section.
Finally, you’ll want one image for the background of the
div (a pattern that repeats).
Then you have to stitch everything together using some Frankenstein HTML and CSS.
This is a lot of work though.
If you’re just using this in one or two places it may be worth it to have a predetermined size that you stick too. Otherwise, try to find a pure HTML/CSS solution that doesn’t rely on images. (Something like this, unfortunately it’s flat).
Actually I did some more research and found an great answer here
With a wonderful JSFiddle
As you can see, you will still need multiple images cut out just like I said, but the whole process of stitching together HTML and such is non-existant and everything is handled via a CSS class.