css difference between background: and background-image:

css background background-image between difference
epicT picture epicT · Sep 21, 2016 · Viewed 17.1k times · Source

quick simple question In the following example of an external CSS page; 

body {
  background-image: url(background.jpg);
}
header {
  background: url(background.jpg);
}

I understand they are effecting different element selectors, my question is what is the difference between using background vs background-image? Does one have access to specific attributes to the other? Please and thank you.

Answer

danish farhaj picture danish farhaj · Sep 21, 2016

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;

Related questions

CSS3 background image transition

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1…

Read More
CSS: background image on background color

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before. So if …

Read More
How to stretch the background image to fill a div

I want to set a background image to different divs, but my problems are: The size of image is fixed(60px). Varying div's size How can I stretch the background-image to fill the whole background of the div? #div2{ background-image:…

Read More