css difference between background: and background-image:

Question

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 1

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; 

Answer 2

By using background, you need to specify other argument to set the background of the page. If you just used background-image, it will only need a single argument.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;