![](/img/trans.png)
[英]Full width & height background image with vertically & horizontally centred text in Foundation
[英]Full width Background Image - Foundation
我希望实现我网页的某些部分,使背景图像能够完整地展开页面,边缘没有空白区域。 这可能吗? 我使用基础5框架。
HTML
<div class="row" id="wrapper">
<div class="large-12 columns">
<div class="kickstart"><img src="img/kick-start.png">
<p class="getfit"><img src="img/get-fit.png"></p>
<p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
<p class="get-contact"><img src="img/get-contact-btn.png"></p>
</div>
</div>
</div>
CSS
#wrapper {
background-image: url("../img/home-img.png");
background-repeat: no-repeat;
width: 100% !important;
z-index: 0;
}
.kickstart {
padding: 30px;
}
.getfit {
padding-top: 10px;
}
.home-text {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
font-weight: normal;
color: black;
}
有两种方法可以做到这一点。
您可以为#wrapper
提供100%
的宽度,或将您的HTML更改为:
<div id="wrapper">
<div class="row">
<div class="large-12 columns">
<div class="kickstart"><img src="img/kick-start.png">
<p class="getfit"><img src="img/get-fit.png"></p>
<p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
<p class="get-contact"><img src="img/get-contact-btn.png"></p>
</div>
</div>
</div>
</div>
由于div
是块元素,因此默认值为width:100%
。 只要它不在已经存在的.row
类中,它将是100%
。
#wrapper {
background-image: url("../img/home-img.png");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100% !important;
z-index: 0;
}
您可以使用background-size属性调整背景的大小。 在你的情况下,你希望它覆盖整个屏幕
请尝试以下代码:
#wrapper {
background: url("../img/home-img.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100% !important;
z-index: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.