In this article, we will learn about the Background in CSS. This property is used to add background to the elements.

We have the following types of Background properties that can be used in CSS:

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

Let’s learn about all the above properties in detail to understand them clearly.

• Background-color

This property is used to add color to the background of any element in CSS.

We can add color to the background using any of the ways we have learned in Colors in CSS | Web Development ( using a color name, using RGB color, using hex colors).

For Example:

body {
      background-color: lightgreen;
      }

If we apply the background color to the body element. It means we are applying background color to the whole webpage as all the content comes under the body element in a webpage.

Output:

Adding background color to heading and paragraph.

For Example:

h1 {
    background-color: yellow;
    }

p {
   background-color: red;
   }

Output:

• Background-image

This property is used to add an image to the background of any element in CSS.

For Example:

body {
      background-image: url(background.jpg);
      }

Output:

Adding background-image to heading and paragraph.

For Example:

h1 {
    backgroun-image: url(background.jpg);
    }

p {
   background-image: url(background.jpg);
   }

Output:

• Background-repeat

If we set background-image to an element it repeats the image horizontally and vertically if the size of the image is smaller than the size of the element.

For Example:

body {
      background-image: url(logo.jpg);
      }

Output:

So, If you want the image to repeat only in the x-direction. Use the repeat-x value for the background-repeat attribute.

For Example:

body {
      background-image: url(logo.jpg);
      background-repeat: repeat-x;
      }

Output:

Note: if you want to do the same in the y-direction. Use the repeat-y value for the background-repeat attribute.

and to avoid repeating the background image we use the background-repeat property with the value no-repeat. So that our image only appears once.

For Example:

body {
      background-image: url(logo.jpg);
      background-repeat:no-repeat;
      }

Output:

• Background-position

We can also set the position of the background image using the background-position property.

We can position the image using the left, center, and right value in the x-direction and top, center, and bottom value in the y-direction or we can also use the length value(like px) to position the image.

For Example(1):

body {
      background-image: url(logo.jpg);
      background-repeat:no-repeat;
      background-position: Center Center; /* x-axis= center, y-axis= center */
      }

Output:

For Example(2):

body {
      background-image: url(logo.jpg);
      background-repeat:no-repeat;
      background-position: 100px 30px; /* x-axis= 100px, y-axis= 30px */
      }

Output:

• Background-attachment

This property is used to specify whether the background image is scrolled or fixed.

By default, the background image scrolls that is why it scrolls with the rest of the page.

If we use the background-attachment as fixed the background image will stick to its place and does not move with the rest of the page.

• Background Shorthand

To reduce the line of code, we use the Background Shorthand property. As it allows us to write all the above-mentioned properties in a single property Background and this property is known as the background shorthand property.

We can use this property in this order:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

For Example:

we can write this:

body {
      background: blue url(logo.jpg) no-repeat scroll center center;
      }

instead of this:

body {
      background-color: blue;
      background-image: url(logo.jpg);
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: center center;
      }

Output:

and it is not necessary to use all the properties in the shorthand property. We can miss any of them which is not required.

That’s all about the Background in CSS.

Hope this article will guide you to recognize all about the Background in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.

https://theudaipurstore.com/maharana-pratap/