इस अध्याय में, आप CSS का उपयोग करके वेब पेजों की पृष्ठभूमि को कैसे स्टाइल और कस्टमाइज़ कर सकते हैं, यह सीखेंगे। आप जानेंगे कि पृष्ठभूमि रंग, पृष्ठभूमि छवि, और पृष्ठभूमि रिपीट और पोजीशन का उपयोग कैसे किया जाता है। इन तकनीकों का सही उपयोग करके आप अपने वेब पेज को अधिक आकर्षक और पेशेवर बना सकते हैं। इस अध्याय के अंत तक, आप विभिन्न पृष्ठभूमि प्रॉपर्टीज़ का उपयोग करके अपने वेब पेजों को डिजाइन करने में सक्षम होंगे। चलिए, पृष्ठभूमि की इस रोमांचक यात्रा की शुरुआत करते हैं।
पृष्ठभूमि रंग (Background Color)
पृष्ठभूमि रंग का परिचय (Introduction to Background Color)
पृष्ठभूमि रंग किसी वेब पेज के एलिमेंट्स की पृष्ठभूमि को सेट करने के लिए उपयोग किया जाता है। यह CSS की एक महत्वपूर्ण प्रॉपर्टी है जो आपके वेब पेज को अधिक आकर्षक और नेत्रसुखद बनाने में मदद करती है। पृष्ठभूमि रंग का उपयोग करके, आप विभिन्न एलिमेंट्स को हाइलाइट कर सकते हैं और वेब पेज की दृश्यता में सुधार कर सकते हैं।
पृष्ठभूमि रंग का उपयोग (Using Background Color)
CSS में पृष्ठभूमि रंग सेट करने के लिए background-color प्रॉपर्टी का उपयोग किया जाता है। आप रंग निर्दिष्ट करने के लिए रंग के नाम, हेक्साडेसिमल (hex) कोड, RGB, या HSL का उपयोग कर सकते हैं।
उदाहरण:
/* रंग का नाम */
body {
background-color: lightblue;
}
/* हेक्स कोड */
div {
background-color: #ff6347; /* Tomato color */
}
/* RGB */
p {
background-color: rgb(255, 165, 0); /* Orange color */
}
/* HSL */
h1 {
background-color: hsl(120, 100%, 50%); /* Green color */
}पृष्ठभूमि रंग के उदाहरण (Examples of Background Color)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि पृष्ठभूमि रंग का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>पृष्ठभूमि रंग के उदाहरण</title>
<style>
body {
background-color: lightblue; /* रंग का नाम */
}
div {
background-color: #ff6347; /* हेक्स कोड */
padding: 20px;
margin: 10px;
}
p {
background-color: rgb(255, 165, 0); /* RGB */
padding: 10px;
}
h1 {
background-color: hsl(120, 100%, 50%); /* HSL */
padding: 15px;
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है</h1>
<div>यह एक डिव है</div>
<p>यह एक पैराग्राफ है</p>
</body>
</html>See the Pen Untitled by arun geek (@arun-geek) on CodePen.
इन उदाहरणों में, हमने विभिन्न तरीकों से पृष्ठभूमि रंग सेट किया है, जिसमें रंग के नाम, हेक्स कोड, RGB, और HSL शामिल हैं। पृष्ठभूमि रंग का सही उपयोग करके, आप अपने वेब पेज को अधिक आकर्षक और उपयोगकर्ता के लिए सहज बना सकते हैं। अगले सेक्शन में, हम पृष्ठभूमि छवि के बारे में जानेंगे।
पृष्ठभूमि छवि (Background Image)
पृष्ठभूमि छवि का परिचय (Introduction to Background Image)
पृष्ठभूमि छवि का उपयोग किसी वेब पेज या HTML एलिमेंट की पृष्ठभूमि को सजाने के लिए किया जाता है। पृष्ठभूमि छवि का सही उपयोग वेब पेज की दृश्यता को बढ़ा सकता है और इसे अधिक आकर्षक बना सकता है। CSS के माध्यम से, आप पृष्ठभूमि छवि को सेट कर सकते हैं और इसे विभिन्न तरीकों से नियंत्रित कर सकते हैं, जैसे कि छवि का रिपीट, पोजीशन, और साइजिंग।
पृष्ठभूमि छवि का उपयोग (Using Background Image)
CSS में पृष्ठभूमि छवि सेट करने के लिए background-image प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी छवि का URL निर्दिष्ट करती है जिसे आप पृष्ठभूमि में उपयोग करना चाहते हैं।
उदाहरण:
/* पृष्ठभूमि छवि सेट करना */
body {
background-image: url('background.jpg');
}
/* पृष्ठभूमि छवि के साथ अतिरिक्त प्रॉपर्टीज़ */
div {
background-image: url('background-pattern.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}पृष्ठभूमि छवि के उदाहरण (Examples of Background Image)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि पृष्ठभूमि छवि का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>पृष्ठभूमि छवि के उदाहरण</title>
<style>
body {
background-image: url('https://example.com/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: white;
text-align: center;
padding: 100px;
}
div {
background-image: url('https://example.com/pattern.png');
background-repeat: repeat;
padding: 20px;
margin: 10px;
}
p {
background-image: url('https://example.com/gradient.png');
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
padding: 10px;
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है</h1>
<div>यह एक डिव है जिसमें पृष्ठभूमि पैटर्न है</div>
<p>यह एक पैराग्राफ है जिसमें पृष्ठभूमि ग्रेडिएंट है</p>
</body>
</html>इन उदाहरणों में, हमने विभिन्न तरीकों से पृष्ठभूमि छवि सेट की है और इसके रिपीट, पोजीशन, और साइजिंग को नियंत्रित किया है। पृष्ठभूमि छवि का सही उपयोग आपके वेब पेज को अधिक आकर्षक और पेशेवर बना सकता है।
पृष्ठभूमि रिपीट और पोजीशन (Background Repeat and Position)
पृष्ठभूमि रिपीट का परिचय (Introduction to Background Repeat)
पृष्ठभूमि रिपीट का उपयोग पृष्ठभूमि छवि को दोहराने के तरीके को नियंत्रित करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, पृष्ठभूमि छवि पूरे एलिमेंट में रिपीट होती है। लेकिन आप CSS के माध्यम से इसे नियंत्रित कर सकते हैं कि छवि कैसे और कितनी बार रिपीट हो।
पृष्ठभूमि पोजीशन का परिचय (Introduction to Background Position)
पृष्ठभूमि पोजीशन का उपयोग पृष्ठभूमि छवि की स्थिति को नियंत्रित करने के लिए किया जाता है। यह प्रॉपर्टी यह निर्दिष्ट करती है कि छवि को एलिमेंट के भीतर कहां रखा जाना चाहिए। आप पिक्सल, प्रतिशत, या कीवर्ड (जैसे top, bottom, left, right, center) का उपयोग कर सकते हैं।
पृष्ठभूमि रिपीट और पोजीशन का उपयोग (Using Background Repeat and Position)
पृष्ठभूमि रिपीट का उपयोग:
- no-repeat: छवि को दोहराया नहीं जाएगा।
- repeat-x: छवि को केवल क्षैतिज दिशा में दोहराया जाएगा।
- repeat-y: छवि को केवल ऊर्ध्वाधर दिशा में दोहराया जाएगा।
- repeat: छवि को दोनों दिशाओं में दोहराया जाएगा (डिफ़ॉल्ट मान)।
उदाहरण:
div {
background-image: url('background.jpg');
background-repeat: no-repeat;
}पृष्ठभूमि पोजीशन का उपयोग:
- कीवर्ड: top, bottom, left, right, center
- पिक्सल या प्रतिशत: 50px, 10%, आदि
उदाहरण:
div {
background-image: url('background.jpg');
background-position: center;
}
पृष्ठभूमि रिपीट और पोजीशन के उदाहरण (Examples of Background Repeat and Position)
नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि पृष्ठभूमि रिपीट और पोजीशन का उपयोग कैसे किया जाता है।
उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>पृष्ठभूमि रिपीट और पोजीशन के उदाहरण</title>
<style>
.no-repeat {
background-image: url('https://example.com/background.jpg');
background-repeat: no-repeat;
background-color: lightblue;
padding: 50px;
}
.repeat-x {
background-image: url('https://example.com/background.jpg');
background-repeat: repeat-x;
background-color: lightgreen;
padding: 50px;
}
.repeat-y {
background-image: url('https://example.com/background.jpg');
background-repeat: repeat-y;
background-color: lightcoral;
padding: 50px;
}
.position-center {
background-image: url('https://example.com/background.jpg');
background-position: center;
background-repeat: no-repeat;
background-color: lightyellow;
padding: 50px;
}
.position-top-right {
background-image: url('https://example.com/background.jpg');
background-position: top right;
background-repeat: no-repeat;
background-color: lightgray;
padding: 50px;
}
</style>
</head>
<body>
<h1>पृष्ठभूमि रिपीट और पोजीशन के उदाहरण</h1>
<div class="no-repeat">यह कोई रिपीट नहीं है</div>
<div class="repeat-x">यह केवल क्षैतिज दिशा में रिपीट है</div>
<div class="repeat-y">यह केवल ऊर्ध्वाधर दिशा में रिपीट है</div>
<div class="position-center">यह केंद्र में स्थित है</div>
<div class="position-top-right">यह शीर्ष-दाएं स्थित है</div>
</body>
</html>इन उदाहरणों में, हमने विभिन्न तरीकों से पृष्ठभूमि रिपीट और पोजीशन को सेट किया है। पृष्ठभूमि रिपीट और पोजीशन का सही उपयोग करके, आप अपने वेब पेज के डिज़ाइन और लेआउट को अधिक आकर्षक और उपयोगकर्ता के अनुकूल बना सकते हैं।
