पाठ 6, कुल 30 में

CSS बैकग्राउंड

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS रंग CSS बॉर्डर

हर element की एक पृष्ठभूमि होती है — डिफ़ॉल्ट रूप से वह पारदर्शी होती है, इसलिए उसके पीछे जो कुछ है वही दिखता है। background properties आपको वह जगह रंगने देती हैं: एक सपाट रंग, एक तस्वीर, एक gradient, या तीनों एक साथ। अच्छी पृष्ठभूमि पेज को पूरा महसूस कराती है; खराब पृष्ठभूमि text को पढ़ने लायक नहीं छोड़ती।

Diagram — देखें, यह सब कैसे जुड़ता है

Background properties — छह properties

Property	उदाहरण	क्या करती है
`background-color`	`#fff8e1`	Element के पीछे सपाट रंग रंगती है।
`background-image`	`url("photo.jpg")`	Element के पीछे तस्वीर रखती है।
`background-repeat`	`no-repeat`	तस्वीर को bathroom tiles की तरह दोहराने से रोकती है।
`background-position`	`center`	तस्वीर कहाँ बैठेगी, यह चुनती है: `top`, `center`, `right`, या सटीक numbers।
`background-size`	`cover`	`cover` पूरा क्षेत्र भर देता है; `contain` पूरी तस्वीर दिखाता है।
`background-attachment`	`fixed`	`fixed` पेज scroll होने पर भी तस्वीर को स्थिर रखता है।

सिंटैक्स — एक hero banner

.hero {
  background-color: #1e3a8a;
  background-image: url("campus.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

ऊपर से नीचे पढ़िए: पहले banner को गहरा नीला रंगिए (ताकि तस्वीर लोड न होने पर भी text पढ़ा जा सके), फिर उसके ऊपर फोटो रखिए, उसे दोहराइए मत, बीच में रखिए, और खींचकर पूरे banner को ढक दीजिए। रंग safety net है; तस्वीर सजावट है।

Shorthand — एक line में सब कुछ

छहों properties एक line में लिखी जा सकती हैं, इस क्रम में: रंग, तस्वीर, repeat, attachment, position, फिर एक slash, फिर size।

.hero {
  background: #1e3a8a url("campus.jpg") no-repeat center / cover;
}

Shorthand छोटा है, पर गलत होना भी आसान है — एक शब्द गलत जगह पर, और पूरी line नज़रअंदाज़ कर दी जाती है। सीखते समय लंबा रूप लिखिए। Shorthand तभी इस्तेमाल कीजिए जब आपको क्रम का पूरा भरोसा हो।

Note: पृष्ठभूमि की तस्वीर सजावट है, content नहीं। अगर तस्वीर में जानकारी है — किसी व्यक्ति की फोटो, एक chart, एक product — तो <img> tag इस्तेमाल कीजिए, ताकि screen readers उसका alt text पढ़ सकें। Backgrounds patterns, textures और banners के लिए होते हैं।

Gradients — बिना किसी तस्वीर के पृष्ठभूमि

Gradient एक रंग से दूसरे रंग में चिकना बदलाव है, और CSS उसे आपके लिए खुद बना देता है — कोई image file नहीं चाहिए। Gradient एक background-image है, इसलिए वह उसी property में बैठता है।

.sunset {
  background-image: linear-gradient(to right, orange, pink);
}
.ball {
  background-image: radial-gradient(circle, yellow, red);
}

linear-gradient सीधी line में मिलाता है — to right, to bottom, या 45deg जैसा angle। radial-gradient एक केंद्र बिंदु से बाहर की ओर मिलाता है, जैसे ऊपर से रोशनी पड़ी गेंद। आप तीन या ज़्यादा रंग भी मिला सकते हैं, बस उन्हें सूची में लिख दीजिए: linear-gradient(red, yellow, green)।

Tip: पूरी चौड़ाई वाले banners के लिए background-size: cover वह एक value है जिसे याद रखना चाहिए। यह तस्वीर को तब तक बड़ा करता है जब तक पूरा क्षेत्र न ढक जाए, ज़रूरत पड़े तो किनारे काटकर। इसे hero sections के लिए इस्तेमाल कीजिए, और आपका banner फोन पर भी और बड़ी screen पर भी सही दिखेगा।

आम गलतियाँ

no-repeat भूल जाना — डिफ़ॉल्ट रूप से पृष्ठभूमि की तस्वीर दोनों दिशाओं में दोहराती है, इसलिए छोटी फोटो पूरे element पर tiles की तरह फैल जाती है।
तस्वीर का गलत path लिखना — url() CSS file के हिसाब से relative होता है, HTML file के हिसाब से नहीं। अगर CSS किसी और folder में है, तो path को उसका हिसाब रखना होगा।
Fallback रंग न देना — अगर तस्वीर लोड न हो, तो पारदर्शी पृष्ठभूमि पर गहरा text पढ़ने लायक नहीं रहता। हमेशा पहले background-color तय करें।
background shorthand गलत क्रम में लिखना — browser पूरी line को नज़रअंदाज़ कर देता है, अंदाज़ा नहीं लगाता कि आपका मतलब क्या था।
बिना overlay के व्यस्त तस्वीर पर text डालना — शब्द फोटो में खो जाते हैं। Text के पीछे गहरा gradient या आधी पारदर्शी रंग इसे ठीक कर देता है।

याद रखें

background-color safety net है — किसी भी तस्वीर से पहले इसे तय करें।
background-repeat: no-repeat तस्वीर को tile बनने से रोकता है।
background-size: cover क्षेत्र भर देता है; contain पूरी तस्वीर दिखाता है।
Gradients background-image की values हैं — कोई image file नहीं चाहिए।
Backgrounds सजावट हैं; असली content की तस्वीरें <img> tag में होती हैं।

उदाहरण समझिए

.hero { background-image: linear-gradient(to right, #f97316, #ec4899); } — gradient पृष्ठभूमि, नारंगी से गुलाबी में मिलती हुई, CSS से बनी — बिना किसी तस्वीर file के।
.hero { color: white; } — चमकीले gradient पर सफ़ेद text, ताकि शब्द पढ़ने लायक रहें।
.pattern { background-color: #fef3c7; background-image: radial-gradient(circle, #fde68a 20%, transparent 20%); background-size: 40px 40px; } — हल्की पीली base पर छोटे dots, हर 40 pixel पर दोहराते हुए, जैसे polka-dot pattern।
.plain { background-color: #e0f2fe; } — सबसे साधारण पृष्ठभूमि: एक सपाट रंग, न तस्वीर, न gradient।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>CSS Backgrounds</title>
<style>
body { font-family: Verdana, sans-serif; margin: 0; }
.hero { background-image: linear-gradient(to right, #f97316, #ec4899); color: white; text-align: center; padding: 40px; }
.pattern { background-color: #fef3c7; background-image: radial-gradient(circle, #fde68a 20%, transparent 20%); background-size: 40px 40px; padding: 30px; margin: 20px; }
.plain { background-color: #e0f2fe; padding: 30px; margin: 20px; }
</style>
</head>
<body>

<div class="hero">
<h1>Chai Festival 2026</h1>
<p>One day, twenty flavours, unlimited kulhads.</p>
</div>
<div class="pattern">
<h2>Pattern box</h2>
<p>This box has a dotted pattern made only with CSS — no picture file at all.</p>
</div>
<div class="plain">
<h2>Plain box</h2>
<p>This box has a simple flat background colour.</p>
</div>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।