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.

Syntax:

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.

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

Syntax

background-color : red;

 

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.

Syntax:

background-size : cover ;

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.

Syntax:

Background-position :center center ;

Some of the values For Background Position are as follows:

ADVERTISEMENT

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

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

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

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).

Syntax:

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

Syntax:

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.

Syntax:

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

Conclusion: