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 Gradients

Posted by ja5on
ja5on
10,338 Points

css background-image vs background

In a CSS video Guil states that background-image property overides the background property. I was just wondering why or how? Any ideas, thanks.

3 Answers

Liam Clarke
Liam Clarke
19,938 Points

Yes correct, it does in this situation. Dont get this mixed up with thinking that it will always override the short hand variation.

As I stated above, this is your 'why or how':

this is completely dependant on the circumstances of CSS specificity, cascade and inheritance

Enjoy!

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Jason

This is due to the rules of CSS, MDN docs explains this well so i wont cover all of it.

However the statement:

background-image property overide's the background property

Is incorrect as this is completely dependant on the circumstances of CSS specificity, cascade and inheritance

background is a shorthand property and it consists of a bunch of background properties. e.g. background-image.

When you set background-color above background without specifying a color, then the background colour will be set to its initial state. Heres an example:

div {
  background-color: red;
  background: center;
}

If you run this, the background will be white (depending on browser) as background takes precedence because how CSS cascades and because we didnt set any value for colour, colour is overridden to its default state.

div {
  background-color: red;
  background: center green;
}

Here I do set the color so the background will go from white to green.

div {
  background-color: red;
  background: center green;
  background-color: blue;
}

And finally, it changes to blue.

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

oh thanks, erm it wasn't about color but he demonstrates that background-image property overrides the background property, which it does do... (in guils words)

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

then later he puts this beneath

background-image: radial-gradient(90deg,#ffa949, firebrick);

which does override the previous code.. so with respect the background-image overrides the background property - im seeing it happen inside the visual studio platform. :-) just wondered why or how..