Setup Background Image CSS | Background CSS

Setup Background image CSS | Background CSS 

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 following CSS Properties:

  •         Background-image:
  •         Background-color:
  •         Background-size:
  •         Background-position:
  •         Background-repeat:
  •         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 property. It is used to specify / change the background image of a web page. 


background-image: url (“ link_to_Image ”);


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 .


background-color : red;


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

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

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 ;

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

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 background  should not be repeated.

Background Attachment CSS:

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” “fixed”.

Background Shorthand in CSS :

Finally lets 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 same as the individual background properties.


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 do Check out our other posts.

Written by: @OmBandiwan


Share on:

Leave a Comment