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
  • #208598

    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.


    div {
        background-image: url(;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        background-attachment: fixed;
        height: 640px;

    Partial solution found,

    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.