CSS Background in hindi
CSS Background का उपयोग webpage में Background Set करने के लिए किया जाता है।
CSS Background को नियत्रित करने के लिए कई अतिरिक्त Background Properties भी Provide कराती है।
जैसे : –
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
CSS Background Color
जब आप अपने HTML Document के लिए Color Background Set करना चाहते हैं, तो इसके लिए CSS की background-color Property का इस्तेमाल किया जाता है और इसकी Value में Color को Define किया जाता है।
आप Background की color Value को कई तरीकों से define कर सकते हैं। जैसे - color name, Hex, RGB आदि CSS Colors की अधिक जानकारी के लिए आप यहां पर पढ़ सकते हैं।
जैसे : –
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Output :
CSS Background image
अगर आप webpage के background में image लगाना चाहते हैं तो आप background-image property का उपयोग करके background में image लगा सकते हैं। इसकी value को image URL द्वारा define किया जाता है।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>Output :–
background-repeat
अगर आपकी Image का Size छोटा है। तो वह पूरे Background को Cover नहीं करेगी। इसके लिए background-repeat Property का इस्तेमाल किया जाता है। इसकी चार संभावित Values हो सकती हैं।- repeat
- no-repeat
- repeat-x
- repeat-y
repeat :
By default webpage के background में use की गई image vertical और horizontal अपने आप ही repeat होती है। कभी कभी यह बहुत अजीब दिखाई देती है। इस value का use करने से भी आपकी image vertical और horizontal दोनों side में बराबर repeat होगी।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
no-repeat :
इस value का use करने से भी आपकी image किसी भी side में repeat नहीं होगी।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>Output:-
repeat-X:
इस Value से Background Image Horizontally Repeat होती है।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Output:-
repeat-Y:
इस Value से Background Image Vertical Repeat होती है।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Output:-
CSS Background -Attachment
CSS Background Attachment property द्वारा आप background image को scroll या fixed कर सकते हैं।
जैसे:–
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Output :-
इस image में आप देख सकते हैं कि background image को right - top साइड में रखा गया है। जब इस page को ऊपर की side scroll करेंगे तो पेज का केवल text scroll होगा background नहीं। क्योंकि यहां पर background attachment को fixed किया है। अगर यहां पर background attachment को scroll कर दें तो text के साथ background भी scroll होने लगेगा।
CSS Background Position
CSS Background Image आपके Content को प्रभावित कर सकता है। इसलिए Background Image की Position को Manually Control करना जरूरी होता है।
Background Image की Position को Control करने के लिए background-position Property का इस्तेमाल किया जाता है। By Default Background के Image की Position top-left होती है। जब आप इसे Manually Set करते हैं, तो इसमें पहली Value Left Side से दूरी Define करती है और दूसरी Value Top से दूरी Define करती है।
CSS Background image default position :
जैसे : –
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
Output:-
इस image में CSS background image की default position को दिखाया गया है। इसमें background image left - top में है।
CSS Background image center position :
जैसे :–
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
background-position: center;Output:-
इस image में CSS background image की center position को दिखाया गया है।
CSS Background image right - bottom position:
जैसे :–
background-image: url("./images/pattern.png");
background-repeat: no-repeat;
background-position: bottom right;Output:-
इस image में CSS background image की right - bottom position को दिखाया गया है।
CSS Background short hand property
आपने अब तक CSS Background की कई Properties के बारे में सीखा है। अब तक हम इन सभी Properties को अलग-अलग Define कर रहे थे। लेकिन, आप इन सभी Properties को एक साथ भी Define कर सकते हैं। इस तकनीक को Shorthand Method कहते हैं। इनको इस प्रकार लिखा जाता है।
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
जैसे :–
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
Output:-
अगर आपको यह पोस्ट 📑 पसंद आई हो तो अपने मित्रों के साथ जरूर शेयर करें। धन्यवाद !
Tags:
CSS
