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.
An alternative to use image is to use border and border-radius.
.box{
top:10px;
left:10px;
position:absolute;
width: 100px;
height: 60px;
border: solid 3px #35342C ;
background-color: #6F6C5D;
border-radius: 5px;
}
.box > div {
position:absolute;
top:1px;
left: 1px;
bottom: 1px;
right: 1px;
background-color: #2A2825;
border: solid 3px #35342C ;
border-radius: 3px;
}
<div class="box">
<div>
</div>
</div>
For the complex border, you will need to have two levels of div, but it is a good alternative.
The code example will show in the browser like this:
It depends on the image and how you're resizing it. If you weren't changing the aspect ratio, and it was simply a magnification thing, I'd say go ahead and just use the larger image scaled down with background-size: x;. If you do this now, using a rectangle changing to a square, it's going to make your vertical borders skew to be narrower.
However this will only work on more modern browser (ie9 and up, which isn't so bad, but it depends how important rendering things correctly for everyone is. Eg. I wouldn't leave a site rendering poorly on ie8 if it were a large ecommerce site where the demographic included less tech savvy people. ie7... now that's probably old enough to forget about)
If you want to use sprite image, you have to split up the html in separate div's to display the corners and borders separately. This is because using sprites, you have to let the size and and form of the html element define which part of the image sprite will be shown, along with a background offset. For your example, this would be a mess as you would need to define 9 div's to get all the parts in place, and will really be similar to the term "table layout" (and in this case probably the easiest to implement as table) which is not recommended in modern web design.
The solution referenced in Johannes' edited answer using multiple backgrounds on a div will be better, although for this to work, you must split up your image to separate images for the different components (4 corners, 2 sides, and 1 content background). Even with the need to split up your image, this is the right way to do it, because the styling will be done in css, and not in html.
