CSS + Bootstrap - 如何扩展图像以响应

Question

我有一个图像，我希望它的右侧图案扩展到容器右侧的末端。我的形象有一个特点，比如下面的星星，所以我不能简单地重复它。我只希望水平的粉红色部分继续。我的真实图像没有可以使用背景颜色获得的颜色，我需要实际图像响应容器的大小。谁能帮帮我？

我目前的解决方法是对所有部分（容器、导航栏、图像、行）使用固定宽度，但我希望我的网站在没有固定宽度值的情况下都能响应。

我按照评论者的提示得出了最终结果。

.OutterDiv{
    position: relative;
    left: 0;
    top:0;
}
.OutterDiv .responsiveImage{
    background-position: left top;
    background-image: url('address1');
    background-repeat: repeat;
    position: relative;
    top: 0; 
    left: 0;
}

.OutterDiv .nonResponsiveImage {
    background-position: left top;
    color: #FFF !important;
    background-image: url('address2');
    background-repeat: no-repeat;
    margin-bottom: 0 !important;
    width: 960px;
    position:absolute;
    top: 0; 
    left: 0;
}

Answer 1

我有我的答案。

.OutterDiv{
    position: relative;
    left: 0;
    top:0;
}
.OutterDiv .responsiveImage{
    background-position: left top;
    background-image: url('address1');
    background-repeat: repeat;
    position: relative;
    top: 0; 
    left: 0;
}

.OutterDiv .nonResponsiveImage {
    background-position: left top;
    color: #FFF !important;
    background-image: url('address2');
    background-repeat: no-repeat;
    margin-bottom: 0 !important;
    width: 960px;
    position:absolute;
    top: 0; 
    left: 0;
}

CSS + Bootstrap - 如何扩展图像以响应

CSS + Bootstrap - How to expand image to be responsive

css

image

twitter-bootstrap

responsive