Search code examples
cssbackgroundbackground-imagebetweendifference

css difference between background: and background-image:


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.


Solution

  • 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;