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:
First Let’s take a look individually at what we use these properties for and how can we implement them.
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
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
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 :
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