ADVERTISEMENT

CSS Background Shorthand Property With Example

Telegram Group Join Now

ADVERTISEMENT

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.

Syntax:

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)

Syntax

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.

Syntax:

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.

Syntax:

Background-position :center center ;

 

 

ADVERTISEMENT

setup background image css | Background css

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

Syntax:

background-repeat :no-repeat ;

 

Setup Background Image CSS | Background CSS

 

ADVERTISEMENT

 

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.

 

ADVERTISEMENT

Background Attachment CSS:

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

ADVERTISEMENT

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:

ADVERTISEMENT

background : color image repeat attachment position ;

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

ADVERTISEMENT

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.

ADVERTISEMENT

Creating A Password Generator Using Javascript

ADVERTISEMENT

Conclusion:

ADVERTISEMENT

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

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT