CSS - CSS Backgrounds kese set kre, image kese lagaye

Websites के categories के अनुसार उसका background भी बदलना जरुरी होता है | आपने देखा होगा कि कई websites का backgrounds; अलग-अलग colors में होता है या कुछ websites के backgrounds पर images होते है |

HTML का default background color ये white होता है, लेकिन अगर कुछ लोग चाहते है तो इस background color को बदल भी सकते है |

Background Related CSS Properties

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

background property(All in One)

Syntax :

background : color_name;
background : url("image_path");
background : url("image_path") background_repeat;
background : url("image_path") background_repeat/position/attachment;

background : color_name;

निचे div1, div2 और div3 को एक ही color को अलग-अलग प्रकार से दिया गया है | निचे color को अलग-अलग प्रकार से दी जाने वाली values को दिया गया है |

Type of Value	Description
color_name	यहाँ पर color का नाम दिया जाता है | For Example, background : red
hexadecimal color code	यहाँ पर hex code color भी दिया जाता है | For Example, background : #F00
rgb color code	यहाँ पर rgb(red,green,blue) color code भी दिया जाता है | background : rgb(255, 0, 0)
hsl color code	यहाँ पर hsl(hue,saturation,luminance) color code भी दिया जाता है | background : hsl(360, 100%, 50%)

.div1{
 background : #F00; /* hexadecimal color code */
}
.div2{
 background : red; /* color name */
}
.div3{
 background : rgb(255, 0, 0); /* rgb color code */
}
.div4{
 background : hsl(360, 100%, 50%); /* hsl color code */
}

Output :

background : url("image_path");

Exmaple में myDiv selector पर image background दी गयी है |

.myDiv{
 background : url("nature.jpg");
}

background : url("image_path") background_repeat;

Example में myDiv selector पर background image के साथ उसे repeat नहीं किया गया है | अगर height, width और repeat नहीं दिया जाता है तो by default image को repeat किया जाता है |

Example 1 :

.myDiv{
 background : url("nature.jpg") no-repeat;
}

Example 2 :

Example में myDiv selector पर image को horizontally(repeat-x) repeat किया गया है |

.myDiv{
 background : url("nature.jpg") repeat-x;
}

Example 3 :

Example में myDiv selector पर image को vertically(repeat-y) repeat किया गया है |

.myDiv{
 background : url("nature.jpg") repeat-y;
}

background : url("image_path") background_repeat/position/attachment;

Example 1 :

Example पर image background attachment को fixed किया गया है |

.myDiv{
 background : url("nature.jpg") no-repeat fixed;
}

Example 2 :

Example पर image background position को right top पर दिया गया है |

.myDiv{
 background : url("nature.jpg") no-repeat right top;
}

Background Property	Description
background-color	Element पर background color दिया जाता है |
background-image	Element पर background image दी जाती है |
background-attachment	Webpage पर background attachment को fixed या scroll set किया जाता है |
background-repeat	background को किस तरह repeat होना चाहिए या repeat नहीं होना चाहिए ये set किया जाता है |
background-position	background की position set की जाती है |