CSS background shorthand property

• By using the background shorthand property, we can specify all the background properties in one single property. This is called background shorthand property.
• For this, we use the shorthand property “background”.
• E.g.

body{

background: yellow url(‘tick.png’) no-repeat fixed right top;

}

• The order of the property values are:

1. background-color.
2. background-image.
3. background-repeat.
4. background-attachment.
5. background-position.

• It is not necessary to have all the above properties while using the shorthand background property.
• Whatever property we have included in the shorthand property, they should be in the right order as listed above.

How to prevent an image scrolling on a web page?

• To prevent an image scroll with the rest of the web page, use the “background-attachment” property as shown below:

body {

background-attachment: fixed;

}

• To allow an image scroll with the rest of the page, use “scroll” as the value of the “background-attachment” property. This is the default style.

• E.g.

<style>

             body{

                 background-image: url(‘checkmark.png’);

                 background-attachment: fixed;

             }

</style>

CSS background position

• To change the background image position on a web page, use the ‘background-position’ property.
• E.g. position the background image in top-right corner:

body{

background-image: url(“abc.jpg”);

background-repeat: no-repeat;

background-position: right-top;

}