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 Transitions and Transforms 2D Transforms

Fernando Ramos
Fernando Ramos
4,369 Points
Posted by Fernando Ramos
Fernando Ramos
4,369 Points

Help with a background property...

Can someone help refresh my memory on how this works (this is from the style.css file on Stage 11, 2D transforms, from the CSS Foundations tutorial): .box { margin: auto; width: 150px; background: url('mike-transparent.png') no-repeat 0 0; background-size: 150px; }

I just need a reminder in the "background:" line for the transparent image... what do the "0 0" properties do after the "no-repeat" property? I know they were discussed in lessons but having trouble finding that part. Thanks!

2 Answers

Aaron Clark
Aaron Clark
21,373 Points
Aaron Clark
Aaron Clark
21,373 Points

The two numbers in the background property are for position. The first is for x-position and the second is for y-position. You can use numbers in pixels and percentages, and you can also use keywords like left, right, top, bottom, and center.

Fernando Ramos
Fernando Ramos
4,369 Points
Fernando Ramos
Fernando Ramos
4,369 Points

Ooops replied to you with an "answer"... see my comments and thanks!

Fernando Ramos
Fernando Ramos
4,369 Points
Fernando Ramos
Fernando Ramos
4,369 Points

Cool. So the 0 0 given would normally cause the image to appear in the upper left hand corner, yes? But given the size is 150px for the images and margins set to auto for ".box," I was having trouble "seeing" the image move around when I entered different x, y values, given the small 150px predefined image field size. It makes more sense now and I do appreciate your input. Definitely helps!