What’s the difference of using background to background-color?

Asked

Viewed 1,969 times

7

I have that code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
      div {
        width: 400px;
        height: 400px;
        background: url("imagem/img1.jpg");
      }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

The top code makes me put background and background-image that works what’s the difference?

css
  • 1

    background is a more comprehensive property, the other is specific...

3 answers

10


In case the background-image property could only have a single value.

background-image: url("imagem/img1.jpg");

And if in case you wanted to put background-repeat: no-repeat for the image not to repeat? easy add property.

background-image: url("imagem/img1.jpg");
background-repeat: no-repeat;

And for the image to stay fixed and change the position? obviously add the properties.

background-image: url("imagem/img1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;

What if my image has a transparent background and I wanted to add a background color? it’s the last time! add the property.

background-color: rgb(140, 50, 190);
background-image: url("imagem/img1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;

You, uh, notice anything about the last bit of code? here if you wanted to change the color, image, not repeat, fix and position you would have to set 5 properties and this leaves your code CSS very large and for that has the property background, which is a shorthand property or is an abbreviated property with it you define the 5 properties as I quoted in the code above in only one property.

background: rgb(140, 50, 190) url("imagem/img1.jpg") no-repeat fixed 50% 50%;

It seems kind of complicated but no, just follow this order regardless if one of the values is missing.

background-color
background-image
background-repeat
background-attachment
background-position

Along you go deeper into the CSS you will see that there are other properties of shorthand (abbreviated) and I bet you have already made use of some.

margin
padding
border
border-radius
animation
transition

7

background-color is a specific property to define the background color of an element. background is a "shortcut" that allows you to combine various background-related properties at once. Example:

/* isto: */
background: #333 

/* seria o mesmo que: */
background-color: #333

/* isto: */
background: url('foo.png') no-repeat 

/* seria o mesmo que: */
background-image: url('foo.png');
background-repeat: no-repeat

There are several other properties "shorthands", an example of very common use is the border. Instead of specifying:

border-width: 1px;
border-style: solid;
border-color: red

You can simplify into:

border: 1px solid red

6

There are things that are not exactly different, but that can bring you a headache if you do not understand what is happening... I’ll show you some examples

What do you think will happen with the css below? You think the background will turn red or not?

body {
    background-color: red;
    background: no-repeat;
}

That’s right... won’t turn red, for the background will overwrite the background-color and its body will run out of color!

And now if I reverse the order what happens?

body {
    background: no-repeat;
    background-color: red;
}

Now yes... this time the background will turn red :)

Example 2

And now the BG will stay red or with the imagem?

body {
    background-color: red;
    background-image: url(https://unsplash.it/10/10);
}

Now it’s easy, you’ll get the picture of course :)

But what if we reverse??

body {
    background-image: url(https://unsplash.it/10/10);
    background-color: red;
}

Will stay red pq the background-color comes after the background-image... WRONG! It will continue with the image, because bg-image has priority over position-independent rendering. The image is an external content that will stay above the color. Welcome to the world of CSS...

Other points

With bg-color you can only have a background color, but with linear or radial gradient vc can have several background colors including one over the other...

html {
    height: 100%;
}
body {
    height: 100%;
    background: 
        
        linear-gradient(to bottom, transparent 0%, #000e 50%), 
        linear-gradient(to right, #f00c 50%, #00fc 100%),
        url(https://unsplash.it/100/100);
}

  • But then I use the background-image?

  • 1

    @Domdomdomdom not necessarily. If you want a solid background color put: red; if you want an image or a color mixture like a gradient use the background-image. As you are still learning, avoid using the "background" shorthand, preferably at this point for writing each of the background properties, this will help you understand what is what and how each property works. This text is in Portuguese and will give you a good light https://developer.mozilla.org/en-US/docs/Web/CSS/background abs

  • 1

    All right then, thank you for answering!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.