Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Nelson Lourenco
Nelson Lourenco
1,766 Points

Using bg-image contain + bg-attachment fixed

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;
}

I did find a partial solution, 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?