बैकग्राउंड स्टाइलिंग का परिचय
CSS बैकग्राउंड प्रॉपर्टीज आपको किसी भी HTML एलिमेंट के पृष्ठभूमि को स्टाइल करने की अनुमति देती हैं। इसमें रंग, इमेज, ग्रेडिएंट और उनकी पोजीशनिंग शामिल है।
/* बेसिक बैकग्राउंड सिंटैक्स */
background: [color] [image] [position] / [size] [repeat] [attachment];
background: [color] [image] [position] / [size] [repeat] [attachment];
यह एक साधारण बैकग्राउंड कलर उदाहरण है
बैकग्राउंड कलर
background-color प्रॉपर्टी किसी एलिमेंट की पृष्ठभूमि का रंग निर्धारित करती है।
HEX कोड
#3498db
#3498db
RGB वैल्यू
rgb(231, 76, 60)
rgb(231, 76, 60)
HSL वैल्यू
hsl(120, 76%, 50%)
hsl(120, 76%, 50%)
RGBA (पारदर्शी)
rgba(52, 152, 219, 0.7)
rgba(52, 152, 219, 0.7)
/* विभिन्न रंग फॉर्मेट */
background-color: #3498db; /* HEX */
background-color: rgb(52, 152, 219); /* RGB */
background-color: hsl(204, 76%, 53%); /* HSL */
background-color: rgba(52, 152, 219, 0.5); /* पारदर्शी */
background-color: #3498db; /* HEX */
background-color: rgb(52, 152, 219); /* RGB */
background-color: hsl(204, 76%, 53%); /* HSL */
background-color: rgba(52, 152, 219, 0.5); /* पारदर्शी */
बैकग्राउंड इमेज
background-image प्रॉपर्टी किसी एलिमेंट की पृष्ठभूमि में छवि सेट करती है।
यहाँ एक बैकग्राउंड इमेज उदाहरण है
/* बैकग्राउंड इमेज उदाहरण */
background-image: url("images/bg.jpg");
background-image: linear-gradient(to right, #3498db, #2ecc71);
background-image: url("pattern.png"), linear-gradient(to bottom, white, #f1f1f1);
background-image: url("images/bg.jpg");
background-image: linear-gradient(to right, #3498db, #2ecc71);
background-image: url("pattern.png"), linear-gradient(to bottom, white, #f1f1f1);
टिप: आप एक साथ कई बैकग्राउंड इमेज भी सेट कर सकते हैं। पहली इमेज सबसे ऊपर और आखिरी सबसे नीचे दिखाई देगी।
बैकग्राउंड पोजीशन
background-position प्रॉपर्टी बैकग्राउंड इमेज की स्थिति निर्धारित करती है।
top left
center
20% 80%
right bottom
/* पोजीशन उदाहरण */
background-position: center; /* केंद्र में */
background-position: top right; /* ऊपर दाईं ओर */
background-position: 50% 50%; /* x और y अक्ष पर 50% */
background-position: 100px 200px; /* पिक्सल में सटीक स्थान */
background-position: center; /* केंद्र में */
background-position: top right; /* ऊपर दाईं ओर */
background-position: 50% 50%; /* x और y अक्ष पर 50% */
background-position: 100px 200px; /* पिक्सल में सटीक स्थान */
बैकग्राउंड रिपीट
background-repeat प्रॉपर्टी निर्धारित करती है कि बैकग्राउंड इमेज कैसे दोहराई जाएगी।
repeat (डिफ़ॉल्ट)
no-repeat
repeat-x
repeat-y
बैकग्राउंड साइज
background-size प्रॉपर्टी बैकग्राउंड इमेज का आकार निर्धारित करती है।
auto (डिफ़ॉल्ट)
cover
contain
100% 80%
/* साइज उदाहरण */
background-size: cover; /* पूरे एरिया को कवर करे */
background-size: contain; /* पूरी इमेज दिखाए */
background-size: 200px 100px; /* सटीक आकार */
background-size: 50% 80%; /* प्रतिशत में आकार */
background-size: cover; /* पूरे एरिया को कवर करे */
background-size: contain; /* पूरी इमेज दिखाए */
background-size: 200px 100px; /* सटीक आकार */
background-size: 50% 80%; /* प्रतिशत में आकार */
बैकग्राउंड अटैचमेंट
background-attachment प्रॉपर्टी निर्धारित करती है कि बैकग्राउंड स्क्रॉल होगा या फिक्स रहेगा।
scroll (डिफ़ॉल्ट) - बैकग्राउंड स्क्रॉल होता है
इस डेमो में स्क्रॉल करके देखें
इस डेमो में स्क्रॉल करके देखें
/* अटैचमेंट उदाहरण */
background-attachment: scroll; /* स्क्रॉल होता है */
background-attachment: fixed; /* फिक्स रहता है */
background-attachment: local; /* कंटेंट के साथ स्क्रॉल होता है */
background-attachment: scroll; /* स्क्रॉल होता है */
background-attachment: fixed; /* फिक्स रहता है */
background-attachment: local; /* कंटेंट के साथ स्क्रॉल होता है */
शॉर्टहैंड सिंटैक्स
आप सभी बैकग्राउंड प्रॉपर्टीज को एक ही लाइन में लिख सकते हैं:
/* शॉर्टहैंड उदाहरण */
background: #3498db url("bg.jpg") no-repeat center center / cover;
background: #3498db url("bg.jpg") no-repeat center center / cover;
महत्वपूर्ण: शॉर्टहैंड में साइज वैल्यू से पहले स्लैश (/) का उपयोग करना न भूलें।
सारांश
- background-color: पृष्ठभूमि का रंग सेट करता है
- background-image: पृष्ठभूमि में छवि जोड़ता है
- background-position: छवि की स्थिति निर्धारित करता है
- background-repeat: छवि दोहराव को नियंत्रित करता है
- background-size: छवि का आकार निर्धारित करता है
- background-attachment: छवि स्क्रॉल व्यवहार निर्धारित करता है