Html 响应背景图像css代码

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

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

我尝试使用1920像素乘以200像素的背景图像，而不是

填充大小

和

背景颜色

。我试过这个，但不起作用

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

---

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

.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;
    }
}

---

应该可以解决你的问题。

你能详细说明一下“它不起作用”吗？图像是否以你想要的方式出现？发布你的HTML代码和一把小提琴！这将有助于在桌面上查看dvmark.com/media-design/powerpoint-presentations.html。在底部是蓝色背景图像，阅读免费网页编辑，然后在手机上查看