html - 如何设置像这张照片一样的全宽背景?

标签 html css background

enter image description here

如您所见,背景图像有 4 种不同的颜色。我不确定如何将其转换为 HTML 以使其覆盖整个页面(水平)。我有以下代码:

body{
background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
}


.upper{
background: url(http://uupload.ir/files/ur8m_cloud.png);
height:600px;
}
<body>
  <!-- upper section -->
   <div class="upper">
    This is the upper section
	</div>
<!--end upper section-->

</body>

但显然它没有按预期工作。我在这里错过了什么?

最佳答案

body{
    background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
    margin: 0;
    padding: 0;
}


.upper{
    background: url(http://uupload.ir/files/ur8m_cloud.png);
    height:600px;
    background-repeat:no-repeat;
    background-position: center top;
    background-size: contain;
}
<body>
  <!-- upper section -->
   <div class="upper">
    This is the upper section
	</div>
<!--end upper section-->

</body>

关于html - 如何设置像这张照片一样的全宽背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30011207/

相关文章:

ios - 当应用程序在后台时 Alamofire 请求

asp.net - ASP.NET WebApi 中的后台异步/等待

ios - "location updates"进程可以在后台运行多长时间?

html - 如何叠加两张图像,但将其定位,使其看起来像一张?

html - 单击导航中的链接时如何使 div 出现

javascript - 在特定 id/class 上使用 pinterest 保存按钮?

html - 将元素与 flexbox 中的底部对齐,而不使用位置 :absolute

javascript - 更改 CSS 类声明或实际将样式应用于每个元素?

html - 如何根据设备视口(viewport)在 Bootstrap 中将按钮从垂直对齐到水平?

javascript - 鼠标悬停时在 iframe 中显示源 html