डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Backgrounds

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 ValueDescription
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 PropertyDescription
background-colorElement पर background color दिया जाता है |
background-imageElement पर background image दी जाती है |
background-attachmentWebpage पर background attachment को fixed या scroll set किया जाता है |
background-repeatbackground को किस तरह repeat होना चाहिए या repeat नहीं होना चाहिए ये set किया जाता है |
background-positionbackground की position set की जाती है |