I wish to achieve parts of my web page to have a background image that spreads the full with of the page, no white space at the edges. Is this possible? Im using foundation 5 framework.
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;
}
There are two ways you can do this.
You can give #wrapper
a width of 100%
, or change your HTML to:
<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>
As a div
is a block element, it will take width:100%
as default. As long as it isn't in an already existing .row
class, it will be 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;
}
You can use the background-size property to adjust the size of your background. in your situation you want it to cover the whole screen
Try the code below:
#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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.