How to set background-size to "cover", plus a little more in CSS?

Question

I have a container with a fixed height of 850px. I want a background-image that will keep the entire background covered at all levels of zoom. I would use background-size: cover however, I need it to be a little bit bigger than cover will make it. I want some of the background to be bleed out of the container and be unseen, for the purpose of creating a parallax.

Basically how can I use background-size: cover, and increase the size a little bit on top of that?

edit: Forgot to mention I'm also using background-attachment: fixed, so if I'm not mistaken, its actually calculated via the size of the browser window(?) and not the 850px tall container. How would I add that extra bleed in this case?

Answer 1

Simply using background-size: auto 110%; did the trick.

Answer 2

This is an old thread but I found a solution to this so thought I'd share.

Using background-size: auto 110%; doesn't really work because you lose the cover functionality. For responsive and more dynamic elements, you can end up with undesired blank spaces.

Instead, create a wrapping div with position:relative; overflow:hidden;. Then within that create your background div with position:absolute; and some additional settings. See below.

.banner-wrapper {
  position: relative;
  min-height: 340px;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
}

.banner {
  position: absolute;
  left: -40px;
  right: -40px;
  top: -40px;
  bottom: -40px;
  width: calc(100% + 40px);
  background: url(https://upload.wikimedia.org/wikipedia/commons/2/25/Lang%27s_short_tail_blue_%28Leptotes_pirithous%29_male_underside.jpg) center center no-repeat;
  background-size: cover;
}

<div class="banner-wrapper">
  <div class="banner">
  </div>
</div>