Welcome to the CSS tutorial, and today we will discuss CSS backgrounds.  Background of any website is very important, and it is must to do for a professional. Background is not important, if you are not worried about the growth of your website in terms of traffic and popularity. The CSS background property will let you control the background activities of any element. Since it is a shorthand property, you are allowed to use multiple CSS properties in one.

Learn css backgrounds

CSS backgrounds property

CSS properties are used to define the background effects of an element. Let’s see the properties and their uses:

  • CSS background-color – The name itself says, it will be used to apply background color to an element.
  • CSS background-image – The beauty of CSS backgrounds is, you can use an image as the background of an element
  • CSS background-repeat – It will help you to set ‘how the image’ will repeat.
  • CSS background-attachment – It will allow you to set the image to scroll or fixed on the applied page.
  • CSS background-position – It will help you to specify the position of the image, like left, right or bottom.
  • CSS background-clip – It will let you control the background image or color extensions beyond an element’s content or padding.
  • CSS background-size – It will let you control the size of the background image.

Tip: If you want to know more about the above said CSS backgrounds, then just click on the topic and learn more about that property.

CSS Backgrounds – Example

Now we will see the use of the property of CSS backgrounds with easy to understand example:




      body {

            background: url("funpic.gif")

            top right / 150px 150px







       <h2>Hi from backgrounds!</h2>



In the above example, we have used 4 CSS backgrounds (image, position, color, and repeat). We have used GIF image, and positioned it to top right, colored it with pink and disable the repeat.  When you will run the program, you will get the result like:

Css backgrounds example

You can try more example with single declaration, to test and master your hand on backgrounds.

Note: we have used the shorthand background property to set all the properties in one declaration.

Points to Remember

1) If you are using the shorthand property, then try to use below order, like:





Background – attachment

Note: In case you will not specify anything in the background property is automatically set to its default.

2) If you want to use multiple backgrounds, then CSS3 is a good option for you.


We have covered CSS background, its type and considered for example to check how to use the CSS background properties. In case you want more elaboration for the individual property, then click on the appropriate property to see step by step help for you people.

What next? Next we will cover CSS fonts

If you liked our content on CSS backgrounds, then like, share, tweet or bookmark for your future reference. Above that, if you want to share your information,  query, or suggestion, then write to us.