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 Using calc() as Background Position Offsets

Posted by Shana Gibson
Shana Gibson
8,788 Points

I don't get the 50% at the end, what part of the positioning do it add to? calc(100% - 40px), calc(100% + 30px), 50%??

I changed it twice to 20% and 75% and didn't see a difference, just wonder what is it there for?

1 Answer

Steven Parker
Steven Parker
241,809 Points
Steven Parker
Steven Parker
241,809 Points

The comma separates the settings for the two images, so this setting is for the 2nd image (the water). There's not a lot of variation in the horizontal dimension, so moving it left and right might be really hard to see.

But I'll bet you can see it if we make it move while you're watching:

.main-header {
  animation: 3s infinite alternate slide ease-in-out;
}

@keyframes slide {
  from { background-position: calc(100% - 40px) calc(100% + 30px), 20%; }
  to   { background-position: calc(100% - 40px) calc(100% + 30px), 75%; }
}