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 trialja5on
10,338 Pointscss 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
19,938 PointsYes 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
19,938 PointsHi 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
10,338 Pointsoh 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..