How do I specify multiple css background properties into a single line?

hoodedvul

From previous examples. We have the following code.

Using the demo code.

HTML.

...
 <div>
        <h1>Good Morning HTML</h1>
    </div>
...

CSS.

...
 div {
           width: 400px;
           height: 400px;
           border: 10px double blueviolet;
           margin: 100px auto;
           color: #fff;
           background-image: url(images/rose.jpeg);
           background-clip: content-box;
           background-repeat: no-repeat;           
      }
...

The result is:

In the CSS we only used three background properties, but there others ones.

The shorthand way of writing the three we have use is as follows.

background: url(images/rose.jpeg) content-box no-repeat This is equivalent to the three individual background properties.

There is some ordering to take note of when using the shorthand form, see this W3S link for further information: CSS background property