CSS Background Shorthand Property With Example

CSS Background Shorthand Property With Example

CSS Background Shorthand Property With Example
CSS Background Shorthand Property With Example

Today we will learn about the CSS Background. In CSS, Background is a Shorthand Property. It is used to change various page background properties like color, image, size, Etc.

We use Background Shorthand for the following CSS Properties:

1. Background-image:
2. Background-color:
3. Background-size:
4. Background-position:
5. Background-repeat:
6. Background-attachment:

First Let’s take a look individually at what we use these properties for and how can we implement them.

Background-Image CSS:

Background-Image is one of the most familiar and frequently used properties. It is used to specify/change the background image of a web page.


background-image: url (“ link_to_Image ”);
Description: setup background image css | Background css


Note:- We can also Use All these properties on individual elements

Background-Color in CSS:

Just like Background-Image, Background- Color is used to change the background color.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)


background-color : red;


Description: setup background image css | Background css


We can specify the color by using either one of the following ways –

  • HEX CODE (e.g.  :  #282828)
  • Rgb value (e.g. :  rgb (40,40,40))
  • Valid Color name (e.g. : Red)

Background-Size in CSS:

As the name suggests Background Size property specifies the size of the background.


background-size : cover ;
Description: setup background image css | Background css

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

The values of background-size are as follows

  • Auto
  • Inherit
  • Cover
  • Contain
  • Initial
  • Percentage
  • Length

Background-Position in CSS:

Background position decides the position of the background.


Background-position :center center ;




setup background image css | Background css

Some of the values For Background Position are as follows:


  • Centre center
  • Left top
  • Right top
  • Left bottom
  • Right bottom

Note:  By default, Background-position is set to the left top.


Background Repeat in CSS:

Background repeat specifies how the background should be repeated, you can specify weather it should be repeated vertically (y) or horizontally(x).




background-repeat :no-repeat ;


Setup Background Image CSS | Background CSS



The values for background-repeat are as follows:

  • Repeat-x: specifies the background to repeat horizontally.
  • Repeat-y: specifies the background to repeat vertically.
  • No-repeat: specifies that the background should not be repeated.


Background Attachment CSS:

The background-attachment property specifies that weather the background should scroll or stay fixed when the page is scrolled.


background-attachment: scroll;

There are only two values for this property that is “scroll” and “fixed”.

Background Shorthand in CSS :

Finally, let’s take a look at How can we use the Background Shorthand property. Background Shorthand property is extremely useful as it enables us to use all the above properties in a single line of code.


background : color image repeat attachment position ;

When declaring this property one should always keep in mind the order for the declaration of the property.

Note: In the above Syntax I’ve only specified the order of the type of the values; The values of all the respective properties will be the same as the individual background properties.

Creating A Password Generator Using Javascript


Background shorthand is an extremely powerful property and makes the work of the programmer much easier and faster; It has given us the ability to define several different properties in a single line of code.

Leave a comment below and let us know what do you think about the Background Shorthand property.

Thank you for visiting our Blog today. Please Check out our other posts.

Written by: @OmBandiwan

Leave a Reply