Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using bg-image contain + bg-attachment fixed

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #208598
    modiophile
    Participant

    I am attempting to create a parallax effect using the properties background-attachment: fixed and background-size: contain however when I add on the fixed attribute the background-image gets out of whack. The backround-image no longer becomes “contained” and expands beyond its parents element’s boundaries.

    Example

    div {
        background-image: url(http://lorempixel.com/1190/640/animals);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        background-attachment: fixed;
        height: 640px;
    }
    
    #208599
    modiophile
    Participant

    Partial solution found, http://jsfiddle.net/13cf7hd1/

    The problem with this snippet is that its geared for background-size: cover and not for contain

    $(window).scroll(function() {
      var scrolledY = $(window).scrollTop();
      $('#container').css('background-position', 'center ' + ((scrolledY)) + 'px');
    });
    

    If you resize the browser window and refresh you’ll see that the background image loads at the bottom correctly, however once you scroll even 1px it quick jumps up farther than the calculated scrolledY. What’s up with that?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.