33

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.

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
epicT
  • 353
  • 1
  • 3
  • 6
  • Related post - [What is the difference between background and background-color](https://stackoverflow.com/q/10205464/465053) – RBT Aug 20 '21 at 11:36

2 Answers2

40

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;
brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
danish farhaj
  • 1,316
  • 10
  • 20
1

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;
quik_silv
  • 2,397
  • 2
  • 15
  • 21