CSS background properties In Hindi:-

दोस्तों आज के पाठ में हम CSS Backgrounds properties के बारे में पढ़ेंगे | CSS Backgrounds का उपयोग Web Page के background को control करने के लिए किया जाता है |

CSS में किसी Web Page के Background को Control करने के लिए निम्नलिखित background properties का उपयोग किया जाता है |

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

 

Background Color का उपयोग Web Page के Background Color को Control करने के लिए किया जाता है |

Background Color का उपयोग कैसे करते है इसका example आप निचे देख सकते है |

Example 1 :-

<html>

<head>

<style>

body {

    background-color: green;

}

</style>

</head>

<body>

<p>This page has a Green background color!</p>

</body>

</html>

 

Background Image :- Background Image का उपयोग Web Page के Background Image को Control करने के लिए किया जाता है |

Background Image का उपयोग कैसे करते है इसका example आप निचे देख सकते है |

Example 2:- main.html Page

<html>

<head>

<style>

body {

    background-image: url("background.jpg ");

}

</style>

</head>

<body>



<p>This Web page has an image as the background. </p>



</body>

</html>

दोस्तों आप जहाँ ऊपर के उदहारण main.html को save करेंगे बहाँ एक image होना चाहिए | तभी css का background-image property काम करेगा | ऊपर के उदाहरण में background.jpg image का उपयोग किया है |

 

Background Repeat:- जब आप ऊपर को अपने कंप्यूटर पर चलाएंगे तो अगर आप के image का height और width छोटा है तो आप का image पुरे web page पर बार बार repeat होगा | अगर आप image के repeat होने को control करना चाहते है तो इसके लिए आप को background-repeat property का उपयोग करना होगा |

 

Example 3 :-

<html>

<head>

<style>

body {

    background-image: url("background.jpg");

    background-repeat: no-repeat;

}

</style>

</head>

<body>

</body>

</html>

 

अगर आप image को Horizontally repeat करना चाहते है तो नीचे का उदाहरण देखें |

background-repeat: repeat-x;

अगर आप image को Vertically repeat करना चाहते है तो नीचे का उदाहरण देखें |

background-repeat: repeat-y;

 

Background Attachment : – अगर आप चाहते है की आप ने जिस image को वेब पेज के background में लगाया है वो fixed हो मतलब की जब आप page को scroll करते है तो image scroll ना हो वो अपने जगह पर fixed हो तो नीचे का उदाहरण देखें |

background-image: url("download.jpg");

background-attachment: fixed;

 

 

Background Position :- background-position से आप image को page पर दिखने की जगह या position को control कर सकते है |

   background-image: url("download.jpg");

        background-repeat: no-repeat;

        background-position: right top;

 

 

Next:- CSS Borders In Hindi :-