在CSS中设置背景颜色和背景图像

Question

我在背景颜色上设置背景图片时遇到问题:这是我的例子,你可以看到我的意思:JSFiddle

现在这里是功能CSS部分:

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

正如您在JSFiddle中看到的那样,背景图像重复出现.如果我使用no-repeat作为属性,图像将消失.

此外,我希望背景图像向右浮动,如果图像大于包含div,我如何使其按比例适合？- 就像你会<img/>使用width: 100%和使图像标签适合height: 100%？

我不想使用HTML图像标记,它会更容易,但有几个原因我不想使用它.

Answer 1

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

并使背景图像不超过其父容器,您可以使用background-size: contain- http://jsfiddle.net/vmvXA/22/