In HTML when do I use color, and what is the difference between background-color and also the background tag?
What are the differences?
56 Answers
color is referring to the text color in that element.
background-color refers to the background color
background is shorthand to combine many background tags into one line.
background: #ffffff url("img_tree.png") no-repeat right top;Combines color, image and background image properties in the one line instead of typing our each style individually.
1I will give you a example using this html element:
<span> This is my text </span>
.value { color: red, background-color: black}
The CSS color is used to change the text color of a html element. In this example "This is my text" would be red. The CSS background-color is used to change the background color so in this case you would get a black box with red text inside it. Finally the background is used to set all the background properties in one declaration. For example:
background: #00ff00 url("smiley.gif") no-repeat fixed center;
This changes the background color, adds the image "smiley.gif" to the background and it centers the image, it doesnt repeat the image if it has the space.
Quick answer
- Color = Text Color
- Background-color = the color of the background
- Background = gives you the posibillity to set color, image , etc...
great tutorials on this are found here
One big thing about this both css properties is, that a background-color does not overwrite an image or a gradient that has been set with this:
background:url(');or
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 20%,#207cca 51%,#7db9e8 100%); If you are trying to change the background from an image to a color you have to use the background property.
1It is true that background gives more options versus background-color. But if you only need to set background color, they are exactly the same, and each will override the other as seen in the snippet.
background: yellow;background-color: yellow;.bc { background: yellow; background-color: green;
}
.bc2 { background-color: green; background: yellow;
}<div class='bc'> bc { background:yellow; background-color:green; }
</div>
<div class='bc2'> bc { background-color:green; background:yellow; }
</div>color: is used to add color to the Text within the Tag.
color: blue;background-color: is used to add color in background of the content inside the tag.
background-color : red;background: is used for adding different type of background property name to the content within the Tag.
background : red url('image.png') fixed repeat cover;
