Adding padding around a background image

Hi there,

I have a full width container that has a background image in and a fixed width container within this. What I am struggling to do is to have the background image have some padding around it so it’s not touching the edges of the screen, but can’t work it out. I know it must be so simple!

This is a fiddle of my example:

I have tried adding margin to the full width container, but that adds page scrolling.

Any ideas what I need to do?


The problem is the .container class using width: 100%, that’s rarely a good idea for a full width container. The default width: auto is much better to work with.

1 Like

Thanks, I managed to wrap it in a div, gave it padding and set the width to the child to auto and it worked :slight_smile:

When I tried in your fiddle, adding width: auto to the existing conatiner seemed to work without an extra div.

1 Like

Yeah that worked with me, but when I added margin, I couldn’t get to change the background unless I changed the body background so I wrapped it in another div.

That’s not going to work as you have a height:100vh with padding and nested inside another height:100vh with more padding. The inner element will be 100vh from inside the outer elements padding and go miles below the fold.

I think you were looking for something like this.

body {
  margin: 0;
  padding: 0;

html {
  box-sizing: border-box;

*:after {
  box-sizing: inherit;

.hp-hero-wrapper {
  display: flex;
  flex-direction: column;
  background: #f6f6f6
    url( right
    center no-repeat;
  min-height: 100vh;
  background-size: auto calc(100% - 20px);
  background-position: right 10px center;

.hp-hero-container {
  flex: 1 0 0;
  padding: 200px 30px;
<div class="container-fluid hp-hero-wrapper">
  <div class="container hp-hero-container">

It uses the border box model and then flex to make the inner element full height and no vertical overscrolling.

 background-size: auto calc(100% - 20px);
  background-position: right 10px center;

That gives a 10px gap around the image.

1 Like

Thanks. That makes sense. I seemed to have it work by wrapping it in an extra div, but I guess that wouldn’t be ideal. The 100vh didn’t seem to add any extra padding below the fold unless I couldn’t see it.

Thanks again!

1 Like

In your fiddle there is about 580px of blank white space below the fold. I realise you may have abandoned that fiddle now but it does show the compound effect :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.