How to scale a background image to cover, times an extra scaling factor?

Question

I have a background image which I would like to cover the element, using background-size: cover; However, I'd also like to scale it up 110% in both directions, beyond what cover does, so that I can subsequently move it around with background-position.

Put another way, I'd like background-size: cover to treat the surrounding div as if it were 110% larger in both directions.

Is there a way to do this purely in CSS?

If I understand correctly, this would be a way to do it, but max() is not standard CSS3:

background-size: max(auto 110%) max(auto 110%);

Answer 1

I have created a Fiddle for you to check out. I believe I understood the question correctly but please let me know if I am off base.

I wrapped the div that has the background-image in another div like so:

<div class="hero-container">
    <div class="row" id="hero"></div>
</div>

and applied the styles like so:

.hero-container {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
#hero {
    background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 110vh;
    margin-bottom: 0px;
    right: 0;
}

Play around with the fiddle by changing the height: 110vh and let me know if this is what you were looking for, or if I am at least on the right track.

Hope this helps!

EDIT*: I removed the transition and the padding as these are not necessary.

If you would like to do this with a container that has a fixed height you can change the .hero-container height to 500px or something and then just use 110% instead of 110vh in the height for the #hero div.

Answer 2

If I do understood your question correctly, I guess you can try this below:

.box {
  width: 40vw;
  height: 40vh;
  background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
  background-size: cover;
}

.box:hover {
  background-size: 140%;
}

<div class="box"></div>