Full width Background Image - Foundation
13,975
Solution 1
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%
.
Solution 2
#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;
}
Author by
user3087394
Updated on August 21, 2022Comments
-
user3087394 over 1 year
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; }