Question

I have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle

Now here is the functional CSS part:

#tancan{
    background-color: #ebebeb;
    background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}

As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.

Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? – Like you would make an image tag <img/> fit by using width: 100% and height: 100%?

I don’t want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.

Answer 1

Try this – http://jsfiddle.net/vmvXA/17/

#tancan {
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}

and to make the background image not exceed its parent container you can use background-size: contain – http://jsfiddle.net/vmvXA/22/