如何设置这张图片的全角背景？
[英]How do I set a full width background like this picture?
问题描述
There is a background image with 4 different colors as you see. 
您会看到有4种不同颜色的背景图像。 I'm not sure how to turn this into HTML so that it covers the whole page (horizontally). 我不确定如何将其转换为HTML，以使其覆盖整个页面（水平）。 I have the following code: 我有以下代码：
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>
But clearly it doesn't work as expected. 但是很明显，它不能按预期工作。 What am I missing here? 我在这里想念什么？
2 个解决方案
解决方案1
0 2015-05-03 07:32:56
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>
解决方案2
0 2015-05-03 11:53:09
Quite simply the body isn't tall enough to show all of that image as the only thing in it is the upper div. 很简单，身体不够高，无法显示所有图像，因为其中唯一的东西就是上层div。
body {
background: url(http://uupload.ir/files/y7l4_bg.png) repeat-x;
height: 2513px; /* image height*/
}
Regardless, using a massive background image like that is probably not the optimum method, especially when that layout and presentaton could be simply achieved with minimal HTML & CSS. 无论如何，使用这样的大背景图像可能不是最佳方法，尤其是当可以使用最少的HTML和CSS来简单地实现布局和演示时。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.