Background Properties: It is used to define a background effect on element. You can apply any background colour, image, size, position etc.
Types of Background Properties:
1.Background-colour:red;
2. Background-image:url(../images/img1.jpg);
3. Background-repeat : no-repeat , repeat-x, repeat-y, repeat
4. Background-size: cover, contain, 100% 100%;
5.Background-position:top,middle,bottom;
6.Background-origin: Border-box, Padding-box, Content-box;
7.Background-Clip:Border-box, Padding-box, Content-box;
8.Background-Attachment:Scroll, Fixed, Local;
9. Types of Background-blend-mode: Darken, Lighten etc.
1.Background-colour: Background-colour is used to specify a background colour in an element. You can used a colour name or any hexadecimal code of colour to implement a colour on the element.
2. Background-image: It put an image at the background. By default an image cover entire element. You can set or adjust it as according your need.
3. Background-repeat : It repeat a background image horizontally or vertically. It define about how to repeat an image.If you want to repeat an image horizontally then use repeat-x.If you want to repeat an image vertically then use repeat-y.
Types of Background-repeat:
- Repeat: This is default.The background image is repeated both vertically and horizontally.
- Repeat-x: The background image is repeated only horizontally.
- Repeat-y: The background image is repeated only vertically.
- No-Repeat: The background-image is not repeated. The image will be shown once.
- Space: The background-image is repeated as much as possible without clipping. The first and last images are pin to every side of the element, and whitespace is distributed between an image.
- Round: The background-image is repeated and pressed or extend to fill the space (no gaps).
4. Background-size: It specify a size of the image. You can specify a size of an image with auto , Percentage and in pixels. If you provide a value e.g. background-size: 200px it counts for the width, and the height is set to auto.
Types of Background-Size:
- Auto: This is default value. The background image is displayed in its original size.
- Length: It will sets the width and height of the background image. The first value set the width, the second value set the height.
- Percentage: It will set the width and height of the background image in percent. It provide a value in percentage as according to the parent element. The first value sets the width, the second value sets the height.
- Cover: Resize the background image to cover the entire area, even if it has to extend an image and cut its one of the edges. cover properties of this tells the browser to make sure the image always cover the entire area of the container.
- Contain: It resize the background image to make sure that the image is fully visible. Contain always show the whole image, even if that ignore a little space to the whole sides or bottom.
5.Background-position: Background-position specify a position of an image. It define about an initial position of an image. By default, background image is placed on the top-left of the webpage. The background-position property in CSS allows you to move a background image within its container.
It has three different types of values:
- Length values (e.g. 200px 15px)
- Percentages (e.g. 50% 10%)
- Keywords (e.g. top right)
1. The default values is 0 0. It places your background image at the top left side of the container.
The first value is the horizontal position, second value is the vertical position. So 200px 15px will move the image 200px to the right and 15px down.
2. Now come to the Percentage. Percentage work in a different way, operating a background image by X% means it will align the X% point in an image to the X% point in the container. For example, 50% means this will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container.
3. Keywords are shortcuts of percentages. It’s easy to remember and use (top right) than 100% 0, and that is the reason of uses of keywords. If you use left center value then it align the content in the center but from left side.Here is a list of all five keywords and their equivalent values:
- Top: vertically is 0%
- Right: horizontally is 100%
- Bottom: vertically is 100%
- Left: horizontally is 0%
- Center: 50% horizontally if horizontal is not defined then this is applied vertically.
6.Background-origin: It specify an (origin position) background positioning area of the background Images. This property will define about from where you want to paint background means inside the border, inside the padding, or whole element.
Types of background-origin:
Padding-box: It is a default value of background- origin. The background image starts from the padding edge of the upper left corner.
Border-box: This is basically work with the border.The background image starts from the border of the upper left corner side.
Content-box: This is basically work with the content .The background image starts from the content of the upper left corner.
7.Background-Clip: Background-Clip Specifies the painting area of the background images. This property defines how distant the background color or image should enlarge within an element.
Types of Background- Clip:
- Border-box: This is a Default value of Background- Clip . The background enlarge behind the border.
- Padding-box: In the Padding-box, the background enlarge to the inside edge of the border.
- Content-box: In this property, the background enlarge to the edge of the content box.
8.Background-Attachment:Background-Attachment Specifies whether the background images are fixed or scrolls with the rest of the page. It make a website attractive website, with the help of Background-Attachment a background image position will be changed according to the scroll, fixed position. Position scrolls with its containing block, or Position fixed within the viewport.
Types of Background- Attachment:
- Scroll: It define how to move a background image relative to the view port. The background image will scroll with the page. scroll property is the default value of background attachment. It scrolls with the main view.
- Fixed: Fixed stay fix. In which background image will not scroll with the page.
- Local: In the Local, The background image will scroll with the webpage contents. Reason behind to invented local was because the default value scroll behave like a fix background. It scrolls both with the main and local view.
9.Background-blend-mode: It Specify about the blending mode of a background-image to be darken, lighten, saturation, screen, multiply, overlay etc.
Types of Background-blend-mode:
- Normal: This is default property of Background-blend-mode . It Sets the blending mode to normal.
- Lighten: It will Set the blending mode to lighten mode.
- Saturation: It will Set the blending mode to saturation mode.
- Screen: It will Set the blending mode to Screen mode.
- Multiply: It will Set the blending mode to Multiply mode.
- Overlay: It will Set the blending mode to overlay mode.
- Darken: It will Set the blending mode to Darken mode.
- Color-Dodge: It will Set the blending mode to color-Dodge mode.
- Color: It will Set the blending mode to color mode.
- Luminosity: It will Set the blending mode to luminosity mode.
Example 1 :
Example 2 :
Example 3 :
Example 4 :