CSS बैकग्राउंड
आप टेक्स्ट रंग सकते हैं। अब पीछे की सतह रंगें। बैकग्राउंड तत्व के बॉक्स को भरते हैं — ठोस रंग, फ़ोटो, और बाद में ग्रेडिएंट — जबकि अक्षर color से ऊपर रहते हैं।
CSS बैकग्राउंड क्या है?
बैकग्राउंड वह परत है जो तत्व की सामग्री के पीछे रंगी जाती है (अक्सर padding क्षेत्र के पीछे भी)। इसे प्रॉपर्टी परिवार से नियंत्रित करें: background-color, background-image, background-repeat, background-size, background-position, और शॉर्टहैंड background। ग्रेडिएंट का अलग पाठ है — आज ठोस भराव और इमेज की बुनियाद।
प्रॉपर्टी एक नज़र में
पहले हर एक का काम सीखें। पहले दिन सारे कीवर्ड ज़रूरी नहीं।
📊 रोज़मर्रा की CSS बैकग्राउंड प्रॉपर्टी
| प्रॉपर्टी | काम | रोज़मर्रा शुरुआत |
|---|---|---|
background-color |
सामग्री के पीछे ठोस भराव | background-color: #f1f5f9; |
background-image |
इमेज परत (बाद में ग्रेडिएंट) | background-image: url("hero.jpg"); |
background-repeat |
टाइल करना या रोकना | background-repeat: no-repeat; |
background-size |
बॉक्स में इमेज स्केल | background-size: cover; |
background-position |
इमेज संरेखित | background-position: center; |
background |
कई मानों का शॉर्टहैंड | background: #0f172a url("a.jpg") center / cover no-repeat; |
background-color से ठोस भराव
सबसे सरल बैकग्राउंड ठोस रंग है। जो भी रंग मान जानते हैं — नाम वाला, hex, rgb या hsl — यहाँ चलता है।
ठोस कार्ड बैकग्राउंड
css.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}टेक्स्ट पढ़ने लायक रखें
अक्षरों के लिए color, बॉक्स के लिए background-color। हल्के भराव को गहरा टेक्स्ट चाहिए; गहरे भराव को हल्का टेक्स्ट।
background-image से इमेज
url("…") से फ़ाइल दिखाएँ। पथ CSS फ़ाइल के सापेक्ष (या مطلق URL)। इमेज सामग्री के पीछे बैठती है — HTML प्रवाह में <img> नहीं।
हीरो ब्लॉक के पीछे फ़ोटो
css.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}इमेज बनाम <img>
जब फ़ोटो सामग्री हो (alt, अर्थ) तो <img>। जब UI या सेक्शन के पीछे सजावट हो तो background-image।
टाइल रोकें: no-repeat + cover
डिफ़ॉल्ट पर कई ब्राउज़र छोटी इमेज को टाइल करते हैं। हीरो के लिए टाइल बंद करें और cover से स्केल करें ताकि फ़ोटो बॉक्स भरे।
बॉक्स भरने वाली हीरो इमेज
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}cover एक वाक्य में
cover तब तक स्केल करता है जब तक बॉक्स भर जाए — किनारे कट सकते हैं। contain पूरी इमेज अंदर फिट करता है — खाली पट्टियाँ दिख सकती हैं।
फ़ोकल पॉइंट लक्ष्य करें
background-position बताता है फ़ोटो का कौन-सा भाग दिखे — जब cover चेहरे या लोगो काटे तो काम आता है।
फ़ोटो निशाना
css.hero {
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}शॉर्टहैंड (पठनीय रखें)
background में कई मान जोड़ सकते हैं। सीखते समय लंबा लिखें; क्रम परिचित हो तो शॉर्टहैंड।
संक्षिप्त background शॉर्टहैंड
css.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}क्रम टिप
आम पैटर्न: रंग, इमेज, position / size, repeat। शॉर्टहैंड उलझाए तो अलग प्रॉपर्टी पर लौटें — दोनों मान्य।
खुद आज़माएँ
.cardपरbackground-color: #f1f5f9और गहराcolorटेक्स्ट।.heroपरbackground-image: url("…"),min-height, हल्का टेक्स्ट।background-repeat: no-repeat,background-size: cover,background-position: center।- position को
left centerयाright centerकरें — फ्रेम में क्या रहता है देखें। - वैकल्पिक: हीरो को
backgroundशॉर्टहैंड से लिखें,url()से पहले फ़ॉलबैक रंग।
आम गलतियाँ
- बॉक्स भरने के लिए
color— केवल अक्षर रंगता है no-repeatभूलना ताकि लोगो सेक्शन पर टाइल हो- टूटे
url("…")पथ (गलत फ़ोल्डर या बिना उद्धरण) - विशाल असंपीड़ित फ़ोटो बैकग्राउंड — धीमे पेज
- ठोस + एक इमेज से पहले जटिल ग्रेडिएंट पर कूदना (ग्रेडिएंट अगला पाठ)
सार
- बैकग्राउंड सामग्री के पीछे रंगता है;
colorटेक्स्ट रंगता है - ठोस के लिए
background-color; फ़ोटो के लिएbackground-image no-repeat,cover/contain,positionसे फ़ोटो नियंत्रित करें- शॉर्टहैंड वैकल्पिक — सीखते समय स्पष्टता चतुराई से ऊपर
- पूरा ग्रेडिएंट नुस्खा अगले पाठ में
- ग्रे कार्ड और एक फ़ोटो हीरो अभ्यास करें जब तक नाम चिपकें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी