Question

I’m trying to figure out the best way to create three 284×87 rounded rectangle boxes, which will contain an icon on the left and text to the right. Is it worth trying to pull this off purely with CSS, or is there no way to get out of using images? Here’s what I have so far, using a background image of the entire image:

<style type="text/css">
.blurect {
    background-image: url(blurect1.gif);
    width: 284px;
    height: 87px;
    color: #FFF;
    }
</style>
<div class="blurect">Test</div>

Answer 1

You can certainly use CSS. As cale_b said, set a background image with the appropriate position, then adjust the padding-left so that the text doesn’t overlap the icon. Here’s the appropriate CSS:

​.rect {
  background: url(path/to/image.png) 4px center no-repeat;
  padding: 4px 4px 4px 24px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}​

4px center in the background rule sets the image 4px from the left edge and centered vertically. The left padding is set to 24px to move the text away from the background icon

Here’s a demo:
http://jsfiddle.net/6p8Rz/

The dimensions are obviously adjustable to suit your needs