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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Why did the background image migrated on the left side of the anchor?

Is this the default behavior for a background image, to migrate on the left side of an element when we set its value to no-repeat? I don't understand why the image and the anchor element act like 2 distinct elements when adding padding - they move away from each other. Thank you.

1 Answer

Chris Wiley
Chris Wiley
14,669 Points
Chris Wiley
Chris Wiley
14,669 Points

The background images start at the top left and repeat to the right. So when they set the background-repeat to no-repeat it only shows the image once and that will be to the top and left of the anchor. The padding on the left side of the anchor pushes the anchor text to the right. The background image just stays where it is and it looks like there is a separation of the image and the anchor. The background isn't affected by padding.