: Can I use CSS spritesheets to give a div a re-sizable background? I'm trying to give a div a background according to a spritesheet, meaning that it'll define the parts from the sprite sheet

@Kristi927

An alternative to use image is to use border and border-radius.

CSS:

.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;
}


HTML:

<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:

Vote Up Vote Down

@Kristi927

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.

Vote Up Vote Down

@Eichhorn212

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)

Vote Up Vote Down

@Nimeshi706

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).

EDIT

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.

Vote Up Vote Down