cssbackground-size

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

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%);
Solution

  • 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.