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 Unused CSS Stages Media Queries Media Features and Media Types

Thomas Euget
Thomas Euget
10,615 Points
Posted by Thomas Euget
Thomas Euget
10,615 Points

repeat-x

Hi i have trouble understanding why you set your repeat x for the bg as background: #F0FCFF url('img/island.png') repeat-x 100% -460px;

can you please give further details? Thanks

4 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

The repeat-x is used to repeat the image of the island so that it appears like one really long mass of land that runs along the top of the page. The background-position controls where the background is placed. The first value, 100%, places the right edge of the background image in the right edge of the element (in this case the right edge of the body tag.) The second value, -460px, moves the background image UP 460 px. This chops off the upper top of the graphic (you can see the entire graphic at http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png)

Here's the animation code:

@-webkit-keyframes bg-move {
    0%   { background-position:  100% -560px; }
    100% { background-position: -350% -460px; }
}

The animation begins with the background image in the far right (100%) and moves the top 560px of the image off the top of the screen. The animation then moves the background image to -350% horizontally (off the left side of the page) and down just a bit (from -560px to -640px)

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Normally a background image repeats left to right and top to bottom to completely fill the background of the element. The repeat-x value only repeats the image on the horizontal axis (left to right).

Thomas Euget
Thomas Euget
10,615 Points
Thomas Euget
Thomas Euget
10,615 Points

my question is then on the 100% and -460px. In this lesson you are using an animation in order to make the background go again and again. if you look at the whole image of the island, it seems it is just repeating a part of the island. How did u make that happen? is it thanks to the 100% and -460px? Thanks

Thomas Euget
Thomas Euget
10,615 Points
Thomas Euget
Thomas Euget
10,615 Points

i understand now - thanks for your quickly and efficient answer. Thomas