Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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:

enter image description here

Now I would like to have a "dynamic" div that could get resized and would look similiar to this:

Target look

If anybody could help or point me in the right direction that would be appreciated.

share|improve this question
add comment

4 Answers

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.

share|improve this answer
    
Thanks, that's great and very helpful. –  user15184 Sep 5 '13 at 0:03
    
I made a quick example (without the corners or background-image) here. –  Johannes Sep 5 '13 at 0:05
add comment

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)

share|improve this answer
    
This will make the borders and corners to be distorted and look very ugly, as in the question the images clearly show that it is going to change the aspect ratio. –  awe Sep 11 '13 at 10:21
add comment

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.

share|improve this answer
add comment

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:

Result

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.