Adding padding around a background image

[toolman]

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:

Edit fiddle - JSFiddle - Code Playground

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

Any ideas what I need to do?

Thanks!

[SamA74]

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.

[toolman]

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

[SamA74]

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

[toolman]

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.

[PaulOB]

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.

html,
body {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.hp-hero-wrapper {
  display: flex;
  flex-direction: column;
  background: #f6f6f6
    url(https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg) 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">
    content
  </div>
</div>

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.

[toolman]

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!

[PaulOB]

@toolman

The 100vh didn’t seem to add any extra padding below the fold unless I couldn’t see it.

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