CODEWITHSUNDEEP
htmlcss
Doggo
Doggo

Reputation: 2321

CSS color vs. background-color vs. background?

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

What are the differences?

Upvotes: 162

Views: 132063

Answers (7)

Steven Spungin
Steven Spungin

Reputation: 29109

It is true that background gives more options versus background-color. In case 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'>
  bc2 { background-color:green; background:yellow; }
</div>

Upvotes: 16

Guzman Ojero
Guzman Ojero

Reputation: 3457

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;
}

Upvotes: 2

abhishek singh
abhishek singh

Reputation: 61

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;

Upvotes: 6

Ifbi dev
Ifbi dev

Reputation: 101

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.

Upvotes: 10

MomasVII
MomasVII

Reputation: 5071

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

Upvotes: 268

Juan Pablo
Juan Pablo

Reputation: 161

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.

Upvotes: 10

Dries Peeters
Dries Peeters

Reputation: 181

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

Upvotes: 11

Related Questions