How to get background-image stay the same when switching from Scroll to fixed?

Question

I am trying to use different images for the background of a website article page. Each section of the article has a different background image. The background should scroll normally (with a background-attachment of "scroll" and size of "contain") until the corresponding section reaches the top, then it becomes fixed with a size of cover.

The problem I am having is that the background image only looks fine when it is fixed. Most of the image is in frame in the background. However, In "scroll and contain mode" the image does not cover the entire background and is instead its normal height. I gather this is because I am using "contain" as a background-size, however, changing the size to "cover" or to a percentage still does not make the image look the same when in scroll as it does when its fixed

Is it possible to get the background image to appear the same size when switching from background attachment:scroll to background-attachment: fixed?

Here is a JSFiddle demonstrating the problem: Clicking the buttons demonstrate how the image looks in as fixed + cover and scroll + contain. I am trying to get the images to look the way it currently does as fixed + cover, but without being fixed.

<section class="fullPage" style="background-image: url('https://img00.deviantart.net/d899/i/2013/030/e/b/jumping_clouds_by_tsharna-d5t830c.jpg')">


    <article class="content article" >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. </p>

<p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>

<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. </p>



    </article>
</section>


<section class="fullPage"  style="background-image: url('https://s3.amazonaws.com/s3.imagefinder.co/uploads/2017/10/07163335/man-jumping-into-the-clouds-880x880.jpg')">


    <article class="content article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. </p>

<p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>

<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. </p>



    </article>
</section>




.fullPage{
    width:100%;
    min-height:100%;
    background-attachment:scroll;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom:100px;

}

.content{
    margin-left:10%;
    margin-right:10%;
}

.article{
    background-color:white;
    padding:3%;
}

Is it possible to get the background image to appear the same size when switching from background attachment:scroll to background-attachment: fixed? I don't think so, unless your container has a fixed size. — Joulss
"Is it possible to get the background image to appear the same size when switching from background attachment:scroll to background-attachment: fixed?" - not as long as you switch the background-size around as well ... If you can restrict this to the width dimension, then it is pretty easy - background-size: 100% auto (plus default body margins nulled), jsfiddle.net/t7ney8je/4 But then of course the image won't fill the whole viewport height any more if it isn't "high enough" in itself. — CBroe
If you want this to work in "both directions", then you will have to use either media queries checking the viewport against the specific aspect ratio of the image, or JavaScript, to decide whether to adapt the image in the width or height dimension. — CBroe
Of course you could also just read the actual dimensions of the .fullPage elements via JS, and then calculate the actual pixel size necessary to "contain" the background image, and assign those as the background-size ... would need recalculation on resize/orientation change, and perhaps even text size change too. — CBroe
Thanks. I believe I uncovered the solution using vh for the background-size height and auto for width. This works as a specific solution, but not sure if auto width will auto calculate the correct width for all images. — auto

FBlade FBlade · Accepted Answer · 2017-12-02T03:52:48

Check if solves:

$('.fullPage').each(function(i){
      $(this).css({
        "background-attachment":"scroll",
        "background-size":"cover",
        "-webkit-background-size":"cover",
        "-moz-background-size":"cover",
        "-o-background-size":"cover"
      });
})

JSFiddle Example

How to get background-image stay the same when switching from Scroll to fixed?

1 Answers