M
M
Maxim Ladny2017-03-28 20:04:21
css
Maxim Ladny, 2017-03-28 20:04:21

What is the difference between background and background-color?

Hello! I can't figure out the difference between background and background-color, when should I use one and when should I use the other? And also I don’t understand why use rgb and hsl if you can set the color simply through: #...?

Answer the question

In order to leave comments, you need to log in

5 answer(s)
S
Sergey Sokolov, 2017-03-28
@ladniy_ms

The background CSS property is just a shortcut that allows you to set several of the properties at once with a single value background-*:
The specified values ​​(in any order) set properties in the same way as individual statements. Not specified retain the default values.
Thus, it is background: #F90completely equivalent background-color: #F90
. For example, it background: #F90 url(fon.jpg) repeat-xis equal to

background-color: #F90;
background-image: url(fon.jpg);
background-repeat: repeat-x;

Colors - different color models are useful for different tasks. For example, in the HSL model, it is easy to "quench" the light by changing only its L component (brightness), or only by reducing the saturation S . Or get a palette of several colors, equally bright and juicy, but evenly scattered around the circle of shades, evenly scattering them H around the color wheel, and leaving S and L the same.

A
Alexey Sklyarov, 2017-03-28
@0example

The difference is huge:
background is a whole set of properties:

background: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif) repeat;
    background-image: url(/wp-content/themes/gorbunov_v2/img/review_client_bg.gif);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;

This bunch of extra code is written if you just use background. In the case of background-color, the color is simply applied.
By analogy with font, you can specify it like this:
font-family: Arial, Sans-serif;
line-height:15px;
font-size:19px;

And you can do this: Regarding rgb, it is useful if you need to set a color with transparency. This is better than making the block opacity.

I
Ivan, 2017-03-28
@LiguidCool

A backgroundlot of things can be included in, incl. Colour.
As far as I remember background-color, it can override background.

R
Rishat Sultanov, 2017-03-28
@rishatss

background-color is used specifically to convey color.
background - you can send an image :)

A
Alexander Lebedev, 2017-03-28
@lebedev444

HTML target

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question