Question

I have a large image iI want to set as background for a div. But the image is rather large. Here it is:

https://i.stack.imgur.com/vaupg.png

On ther right hand side it will contain text.

How would I go about doing this without having to load such a large image with css?

Answer 1

If you want to add plain text on top of the image you can just use positioning to place a child element in the correct place:

HTMl —

<div>
    <span>Text Goes Here</span>
</div>

CSS —

div {
    position   : relative;
    background : transparent url(http://i.imgur.com/4apfI.png) 0 0 no-repeat;
    width      : 530px;
    height     : 128px;
}
div span {
    position : absolute;
    top      : 20px;
    right    : 20px;
    width    : 330px;
    height   : 80px;
    overflow : hidden;
}

Here is a demo: http://jsfiddle.net/XhJZW/

Update

You’re image is pretty simple, you can re-create it with CSS gradients like this:

HTML —

<div>
    <span class="left"></span>
    <span class="right"></span>
    <span class="content"></span>
</div>

CSS —

div {
    position : relative;
    width    : 530px;
    height   : 128px;
}
div .left, div .right {
    position : absolute;
    border   : 1px solid #a5a5a5;
    
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(188,188,188,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(99%,rgba(188,188,188,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(188,188,188,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc',GradientType=0 ); /* IE6-9 */
}
div .left {
    top     : 0;
    left    : 0;
    width   : 165px;
    height  : 108px;
    z-index : 2
}
div .right {
    top     : 6px;
    left    : 143px;
    width   : 350px;
    height  : 97px;
    z-index : 1;
}
div .content{
    position : absolute;
    top      : 15px;
    right    : 45px;
    width    : 300px;
    height   : 80px;
    overflow : hidden;
    border   : 1px solid #000;
    z-index  : 3;
}

Here is a demo: http://jsfiddle.net/XhJZW/3/

The above CSS is approximately 2KB. About a quarter of the PNG image.

Note that browsers will render the gradients and the border-radius differently depending on what the browser supports. The oldest browsers will just see a couple of grey boxes on top of each other (no rounded corners and no gradients).