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 Michael Monceaux
Michael Monceaux
Courses Plus Student 3,918 Points

What is the purpose of the forward slash in background shorthand?

background: #ffa949 url('.../img/mountains.jpg') no-repeat center / cover;

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

Can you give an example, or a reference to and time index of a video?

Michael Monceaux
Michael Monceaux
Courses Plus Student 3,918 Points

Yes!: background: #ffa949 url('.../img/mountains.jpg') no-repeat center / cover;

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Michael,

The forward slash is required syntax for separating background position values and background size values. This is to eliminate misinterpretation of the values specified.

If you're going to specify both, then background-position has to come first, then the forward slash, then the background-size.

This mdn page for the background property shows the formal syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/background

This is what tells you the syntax you have to use when specifying the different background values.

The relevant portion of the syntax is:

<position> [ / <bg-size> ]?

What this means is that if you're going to use this option you have to specify the background position, optionally followed by a forward slash and background size. The question mark means that what's in the brackets is optional. This also means that you can't specify background size without also specifying background position first.

There is no way to only specify the background size. If this is what you want to do then you have to use the individual background-size property.

Michael Monceaux
Michael Monceaux
Courses Plus Student 3,918 Points

Thanks!