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 is no best size for background image! According to worldwide statistics for the last quarter of 2016, the most used screen resolution is 1366 x 768 px, followed by 1920 x 1080 px. However, if you want to have full background image we recommend picture with dimensions 1980 x 1280 px (width x height).
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
Use the auto Value for Width and the max-height Property to Resize the Image in CSS. We can use the auto value to the width and set the max-height property to specify the width of an image to fit in a container. We will shrink the height of the image to the height of the container.
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%
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With