146

In HTML when do I use color, and what is the difference between background-color and also the background tag?

What are the differences?

micstr
  • 5,080
  • 8
  • 48
  • 76
Doggo
  • 2,133
  • 3
  • 16
  • 28
  • 2
    Welcome Ivo. Read [How to ask](http://stackoverflow.com/help/how-to-ask) - Search and Research first as @Barthy suggests – micstr Aug 19 '16 at 08:21
  • 2
    @Barthy That is exactly why it has been downvoted. It shows lack of research. – Dalija Prasnikar Aug 19 '16 at 10:45
  • 23
    just because something is documented somewhere else doesn't mean you can't ask about it on SO – Dave Cousineau Nov 24 '17 at 17:08
  • 1
    @DaveCousineau It is been downvoted as Dalija Prasnikar said because it shows a lack of rescouce and in the (http://stackoverflow.com/help/how-to-ask) it says you should show some research. – Doggo Nov 27 '17 at 07:20
  • 13
    This is the top result for the question and I'm using duckduckgo. So yes, a few seconds of internet search brings someone here and that isn't a bad thing. – Matt Nov 09 '19 at 21:41
  • Se ehttps://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color for the difference between bg and bg-color – TylerH Aug 23 '22 at 15:55

7 Answers7

248

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.

w3schools

MomasVII
  • 4,641
  • 5
  • 35
  • 52
  • 15
    A teacher is there to tell us how it's done and solve doubts from whoever is reading the books: give simple answers to simple questions. But not everybody can pay for a good teacher. To me the important is to learn, and it's not everyday we have time and energy to dig into hidden answers. If your division was right, then this site would not have much merit. – Rodrigo Oct 17 '18 at 03:45
10

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

Dries Peeters
  • 171
  • 2
  • 5
10

I will give you a example using this html element:

<span class="value"> 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.

Juan Pablo
  • 161
  • 2
  • 5
9

It 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>
Steven Spungin
  • 27,002
  • 5
  • 88
  • 78
9

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('https://example.com/image.jpg');

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.

Anbuselvan Rocky
  • 606
  • 6
  • 22
Ifbi dev
  • 91
  • 1
  • 2
  • 1
    Thank you very much for the overwrite hint. Ran into a case where my background was not working because of a gradient call elsewhere. – Chukwuemeka Inya Jun 26 '21 at 06:44
5

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;
Anbuselvan Rocky
  • 606
  • 6
  • 22
abhishek singh
  • 51
  • 1
  • 1
0

Let me give you some definitions and examples.

  1. The color property specifies the color of text.
p {
  color: blue;
}
  1. The background-color property sets the background color of an element.
div {
  background-color: lightgray;
}
  1. The background property is a shorthand property that allows you to set multiple background-related properties in one declaration. These properties include background-color, background-image, background-repeat, background-position, and others.

Instead of doing: source

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

You can do:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
Guzman Ojero
  • 2,812
  • 1
  • 20
  • 20