- Introduction to CSS Background Property in Hindi
- CSS background-color
- CSS background-image
- CSS background-repeat
- CSS background-attachment
- CSS background-position
Introduction to CSS Background Property
CSS background property, तत्व पर background effects को परिभाषित करने के लिए प्रयोग किया जाता है। 5 CSS background properties हैं जो HTML तत्वों को प्रभावित करते हैं:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
1) CSS background-color
तत्व की background का रंग निर्दिष्ट करने के लिए CSS background-color property का उपयोग किया जाता है।
आप background color इस तरह सेट कर सकते हैं:
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello hinditutorialspoint. This is an example of CSS background-color.</p>
</body>
</html> आउटपुट:
My first CSS page.
Hello hinditutorialspoint. This is an example of CSS background-color.
2) CSS background-image
background-image property का उपयोग किसी तत्व की background के रूप में image को सेट करने के लिए किया जाता है। डिफ़ॉल्ट रूप से image पूरे तत्व को कवर करती है। आप इस तरह के पेज के लिए बैकग्राउंड इमेज सेट कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello hinditutorialspoint.com</h1>
</body>
</html> 
नोट: background image को text के रंग के अनुसार चुना जाना चाहिए। text और background image का खराब संयोजन खराब डिज़ाइन और पठनीय वेबपेज का कारण हो सकता है।
3) CSS background-repeat
डिफ़ॉल्ट रूप से, background-image property, background image को क्षैतिज और लंबवत दोहराता है। कुछ छवियों को केवल क्षैतिज या लंबवत दोहराया जाता है।
यदि छवि केवल क्षैतिज रूप से दोहराई जाती है, तो background बेहतर दिखती है।
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello hinditutorialspoint.com</h1>
</body>
</html> Output:
background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello hinditutorialspoint.com</h1>
</body>
</html> Output:
4) CSS background-attachment
background-attachment property का इस्तेमाल यह बताने के लिए किया जाता है कि बैकग्राउंड इमेज फिक्स है या ब्राउजर विंडो में बाकी पेज के साथ स्क्रॉल करें। अगर आपने बैकग्राउंड इमेज को सेट किया है तो ब्राउजर में स्क्रॉल करने के दौरान इमेज मूव नहीं करेगी। चलिए, fixed background image के साथ एक उदाहरण लेते हैं।
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed; Output:
5) CSS background-position
background-position property का उपयोग background image की प्रारंभिक स्थिति को परिभाषित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, background image वेबपेज के top-left पर रखी जाती है।
आप निम्न स्थिति निर्धारित कर सकते हैं:
- center
- top
- bottom
- left
- right
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 
