Question

这是我购买的模板中存在的代码。

.punch_text03 {
    float: left;
    width: 100%;
    padding: 40px 0px;
    background-color: #3398d4;
}

而不是padding size和background color我正在尝试使用1920px乘200px的background-image。我试过这个，但它不起作用

.punch_text03 {
    float: left;
    width: 100%;
    background: url('../images/bg11.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

Answer 1

当我在检查中检查时，选择器看起来像这样

.punch_text03{
float: left;
width: 100%;
padding: 40px 0px;
background-repeat: no-repeat;
background-color: #0a70e3;
background: url('../images/bg11.jpg');

尝试添加

background-size:cover;

有效。

如果您只想在手机上使用它，请使用媒体查询

@media screen and (max-width:768px){
    .punch_text03{
        background-size:cover;
    }
}

应该解决你的问题。

响应式背景图像css代码

1 个答案: