CSS Difference Between Background: and Background-Image:

css difference between background: and background-image:

In a background property you can add background-color, repeat, no-repeat and other image attributes, but in the background-image property you are only allowed to add image.

background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

and in background property you can do in one line all these

background: #ccc url(paper.gif) no-repeat;

What is the difference between background and background-color

Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shorthand for

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

Thus, besides the background-color, using the background shorthand you could also add one or more values without repeating any other background-* property more than once.

Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).

CSS: background image on background color

You need to use the full property name for each:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Or, you can use the background shorthand and specify it all in one line:

background: url('images/checked.png'), #6DB3F2;

When to use IMG vs. CSS background-image?

Proper uses of IMG

1. Use IMG if you intend to have
   people print your page and you want the image to be included by default.
   —JayTee
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

1. Use IMG plus alt attribute if the image
   is part of the content such as a logo or diagram or person (real person, not stock photo people).
   —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG
   for multiple overlay images in IE6.
4. Use IMG with a z-index in order
   to stretch a background image to fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

1. Use CSS background images if the
   image is not part of the content.
   —sanchothefat
2. Use CSS background images when
   doing image-replacement of text eg. paragraphs/headers.
   —sanchothefat
3. Use background-image if you intend to have
   people print your page and you do not want the image to be included by default.
   —JayTee
4. Use background-image if you need to improve download times, as
   with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

CSS color vs. background-color vs. background?

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

background or background color?

There's no difference about compatibility. The only difference is that using background you could add several properties in the same line, as you probably know, instead of repeating background-color, backgroud-image etc in different lines.

Can we still use background-image and background-color together?

By default the background color is behind the background image, so if you specify one background, with a color and an image, the color will be invisible behind the image.

However, you can specify multiple backgrounds, each with their own properties. So one background can have an image, while another can have a color. And then the colored background can be over the image..

This is explained in detail in
https://css-tricks.com/tinted-images-multiple-backgrounds/

The trick is to specify a semi-transparent colored background, and a separate image background. You can specify them comma separated. In the code below, the first background is semi-transparent background. A normal rgba() color cannot be used as a background, but you can fake it by defining a linear gradient with two times the same color. The color values are the decimal RGB values for your color, and the fourth parameter specified an opacity of 50%.
The second background is the image itself.

.blue-pattern {
  background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    , url('/your image url');

In a full code sample it would look like this. Note that I've changes the url and skipped the other image properties.

.blue-pattern {

  background: 

    linear-gradient(

      rgba(64, 153, 255, 0.5), 

      rgba(64, 153, 255, 0.5)

    )    

    ,

   url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Portrait_of_Arthur_Conan_Doyle.jpg/460px-Portrait_of_Arthur_Conan_Doyle.jpg');

    

}

.pad--tiny {

  height: 500px; /* for demo */ 

}

<div class="blue-pattern pad--tiny">

    <p class="text--white">Blah blah blah, text and stuff</p>                                   

</div>

---

Related Topics