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 CSS Basics (2014) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Posted by daniel steinberg
daniel steinberg
14,651 Points

Hex value before URL

What is the purpose of the orange hex value before the URL?..As a stand alone line (no gradients) it appears to do nothing?

ffa949 url('../img/mountains.jpg') no-repeat center;

2 Answers

Daniel Barros
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Barros
Front End Web Development Techdegree Graduate 23,589 Points
Daniel Barros
.a{fill-rule:evenodd;}techdegree seal-36
Daniel Barros
Front End Web Development Techdegree Graduate 23,589 Points

Hi Daniel,

I believe the orange color is a fallback in case the image doesn't load. E.g. The user has disabled images in their browser.

Cheers,

Daniel

Michael Shields
Michael Shields
12,650 Points
Michael Shields
Michael Shields
12,650 Points

Hi Daniel,

That orange hex value actually isn't for the gradient. In the style.css file, if you were to comment out the background-image rule on .main-header, save and refresh the page, you'll notice the orange background for just a second before the image of Lake Tahoe is loaded - a way for us as the developer to see that the page renders but the image loads a moment late.

You do not have to declare the color value before the url in the css background shorthand-property. <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/background -->

The background-image rule on .main-header is the property setting the gradient. This rule has priority over the background shorthand declaration above it in the code so you won't see the orange background.