CSS background-image resizes when I set background-attachment: fixed

Question

I have a div named "page". I set its background-image with CSS, using the code below. I size the image to take 100% of the div's width, and it sets nicely its height to keep its scale. But when I set "background-attachment: fixed", it resizes the image. It increases the image size, and now it doesn't fit into my div, so most of it is cut. I will highly appreciate any help.

The CSS code:

    #page {
        height: 100%;
        width: 60%;
        margin: 0 auto;
        background-image: url('bg2.jpg');
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

Coheman

it's probably expanding to its natural size so it's shown 1:1, rather than the shrunken version you were shoehorning into the div. – Grisgris

Answer 1

I have just encountered the same issue with a background image sized using background-size: contain;.

When I set the background-attachment to fixed, the sizing no longer applies to the element carrying the background image, but instead it seems to apply to the viewport, so it's much larger and extends beyond the original element.

Cushat