पृष्ठभूमि-संबंधित CSS गुण

Articles

यह लेख पृष्ठभूमि-संबंधित CSS गुणों की व्याख्या करता है।

आप सीख सकते हैं कि पृष्ठभूमि सेटिंग, स्थिति, और पुनरावृत्ति जैसे गुणों का वर्णन कैसे करें।

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

पृष्ठभूमि और सजावट

`background-color` गुण

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color गुण का उपयोग CSS में किसी तत्व की पृष्ठभूमि के रंग को सेट करने के लिए किया जाता है। आप टेक्स्ट और अन्य तत्वों के पीछे प्रदर्शित रंग निर्दिष्ट कर सकते हैं, और रंग विभिन्न स्वरूपों में परिभाषित किए जा सकते हैं। रंग निर्दिष्ट करने की विधि color गुण के समान है, लेकिन आप transparent का उपयोग करके पूरी तरह से पारदर्शी पृष्ठभूमि भी निर्दिष्ट कर सकते हैं।

व्याख्या:

red-example क्लास एक कीवर्ड का उपयोग करके पृष्ठभूमि का रंग लाल निर्दिष्ट करती है।
hex-example क्लास एक हेक्साडेसिमल कोड का उपयोग करके पृष्ठभूमि का रंग निर्दिष्ट करती है।
rgb-example क्लास आरजीबी फॉर्मेट का उपयोग करके पृष्ठभूमि का रंग निर्दिष्ट करती है।
rgba-example क्लास आरजीबीए फॉर्मेट का उपयोग करके, पारदर्शिता जोड़ते हुए, पृष्ठभूमि का रंग निर्दिष्ट करती है।
hsl-example क्लास एचएसएल फॉर्मेट का उपयोग करके पृष्ठभूमि का रंग निर्दिष्ट करती है।
hsla-example क्लास एचएसएलए फॉर्मेट का उपयोग करते हुए, पारदर्शिता जोड़कर, पृष्ठभूमि का रंग निर्दिष्ट करती है।
transparent-example क्लास पृष्ठभूमि को पारदर्शी बनाती है।

`background-image` गुण

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image गुण का उपयोग किसी तत्व की पृष्ठभूमि के रूप में एक छवि सेट करने के लिए किया जाता है। निर्दिष्ट छवि तत्व की पृष्ठभूमि के रूप में प्रदर्शित होती है, और इसका आकार, स्थिति, और पुनरावृत्ति विधि अन्य संबंधित गुणों के साथ समायोजित किया जा सकता है। हम बाद में background-size, background-position, और background-repeat जैसे संबंधित गुणों की भी व्याख्या करेंगे।

व्याख्या:

background-image-example क्लास background-image प्रॉपर्टी का उपयोग करके image.jpg को पृष्ठभूमि के रूप में सेट करती है। background-size: cover पूरी तत्व को छवि से कवर करता है, और background-position: center छवि को केंद्र में लाता है। background-repeat: no-repeat के साथ पुनरावृत्ति को बंद किया जा सकता है।
background-image-gradient क्लास linear-gradient() का उपयोग करके पृष्ठभूमि में लाल से नीले तक ग्रेडिएंट सेट करती है। ग्रेडिएंट बाईं ओर से दाईं ओर प्रदर्शित होता है।

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-image प्रॉपर्टी निम्नलिखित मान ले सकती है।

url(): पृष्ठभूमि छवि का URL निर्दिष्ट करता है। छवि फ़ाइल को url() के अंदर शामिल करें। (ex.url('image.jpg'))
none: यह निर्दिष्ट करता है कि पृष्ठभूमि छवि सेट न करें। यह डिफ़ॉल्ट मान है।
ग्रेडिएंट्स: CSS ग्रेडिएंट सुविधाओं का उपयोग करते हुए, ग्रेडिएंट्स को पृष्ठभूमि छवि के रूप में सेट करना भी संभव है। (ex.linear-gradient(), radial-gradient())

`background-image` प्रॉपर्टी के महत्वपूर्ण बिंदु।

छवि का आकार और स्थिति: पृष्ठभूमि छवि के आकार और स्थिति को अन्य गुणों के साथ नियंत्रित किया जा सकता है, जिससे डिज़ाइन में समायोजन किया जा सके। उदाहरण के लिए, background-size: cover निर्दिष्ट करने पर छवि पूरे क्षेत्र को कवर करने के लिए खिंच जाती है, और किसी भी कटाव को हटा देती है।
ग्रेडिएंट्स का उपयोग करना: किसी छवि के बजाय, आप पृष्ठभूमि के रूप में ग्रेडिएंट का उपयोग कर सकते हैं, जिससे डिज़ाइन में एक गतिशील तत्व जुड़ता है।

`background-position` प्रॉपर्टी।

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position प्रॉपर्टी का उपयोग किसी तत्व के अंदर पृष्ठभूमि छवि की स्थिति निर्दिष्ट करने के लिए किया जाता है। तत्व के अंदर पृष्ठभूमि छवि की स्थिति को नियंत्रित करके, आप अपने डिज़ाइन से मेल खाने वाले लेआउट बना सकते हैं। डिफ़ॉल्ट रूप से 0% 0%, छवि को ऊपर बाएँ कोने में रखता है।

व्याख्या:

top-left-example क्लास छवि की स्थिति को top left के रूप में निर्दिष्ट करती है, जिससे छवि को शीर्ष-बाएँ कोने में रखा जाता है।
center-example क्लास center विशेषता का उपयोग करते हुए छवि को मध्य में रखती है।
bottom-right-example क्लास छवि की स्थिति को bottom right के रूप में निर्दिष्ट करती है, जिससे छवि को नीचे-दाएँ कोने में रखा जाता है।

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-position प्रॉपर्टी निम्नलिखित प्रकार के मान ले सकती है।

कीवर्ड्स: आप left, right, top, bottom, center निर्दिष्ट कर सकते हैं।
- center निर्दिष्ट करने से पृष्ठभूमि छवि तत्व के केंद्र में आ जाएगी।
- right निर्दिष्ट करने से पृष्ठभूमि छवि तत्व के दाईं ओर आ जाएगी।
- top left निर्दिष्ट करने से पृष्ठभूमि छवि तत्व के ऊपर बाएँ कोने में आ जाएगी।
- नीचे दाएं' निर्दिष्ट करने से पृष्ठभूमि छवि को नीचे दाएं कोने में रख दिया जाएगा।
लंबाई या प्रतिशत: आप 10px 20px, 50% 50% जैसे मान निर्दिष्ट कर सकते हैं।
- 10px 20px निर्दिष्ट करने पर पृष्ठभूमि छवि बाईं ओर से 10px और ऊपर से 20px पर रखी जाएगी।
- 50% 50% निर्दिष्ट करने से पृष्ठभूमि छवि को क्षैतिज और ऊर्ध्वाधर दोनों दिशाओं में केंद्रित किया जाएगा।
calc() फ़ंक्शन: CSS गणनाओं का उपयोग करके अधिक सटीक स्थिति प्रदान करता है।

`background-size` गुण

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size गुण का उपयोग किसी तत्व के लिए पृष्ठभूमि छवि के आकार को निर्दिष्ट करने के लिए किया जाता है। इस गुण का उपयोग करके आप तय कर सकते हैं कि पृष्ठभूमि छवि कैसे प्रदर्शित होगी, चाहे वह पूरे तत्व को कवर करे या अपने मूल आकार को बनाए रखे, डिजाइन के अनुसार। डिफ़ॉल्ट मान auto होता है, जो पृष्ठभूमि छवि के मूल आकार को बनाए रखता है।

व्याख्या:

cover-example क्लास cover निर्दिष्ट करती है। छवि को पूरे तत्व को कवर करने के लिए बड़ा किया जाएगा, लेकिन इसके कुछ भाग कट सकते हैं।
contain-example क्लास contain निर्दिष्ट करती है। छवि को तत्व के भीतर समायोजित किया जाएगा, लेकिन कुछ खाली स्थान दिखाई दे सकता है।
fixed-size-example क्लास पृष्ठभूमि छवि के लिए निश्चित आकार निर्दिष्ट करती है, प्रत्येक का चौड़ाई और ऊंचाई 100px सेट करती है।

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-size प्रॉपर्टी को निम्न प्रकार के मान दिए जा सकते हैं।

कुंजीशब्द
- auto: छवि के डिफ़ॉल्ट आकार को बनाए रखता है (चौड़ाई और ऊंचाई स्वचालित रूप से निर्धारित होती है)।
- cover: पृष्ठभूमि की छवि का आकार तत्व को पूरी तरह से कवर करने के लिए समायोजित करता है। यह पूरे तत्व को भर देगा, लेकिन छवि के कुछ हिस्से काटे जा सकते हैं।
- contain: छवि को तत्व के भीतर फिट करने के लिए समायोजित करता है, लेकिन पूरे तत्व को कवर नहीं करता। छवि का आयाम अनुपात बनाए रखा जाता है।
सांख्यिकीय मान (px, %, em, आदि)
- चौड़ाई और ऊंचाई: चौड़ाई और ऊंचाई को स्पष्ट रूप से निर्दिष्ट करें। यदि केवल एक मान निर्दिष्ट किया गया है, तो यह चौड़ाई के लिए लागू होता है, और ऊंचाई स्वचालित रूप से समायोजित हो जाती है।
- प्रतिशत: पृष्ठभूमि छवि का आकार तत्व के आकार के प्रतिशत के रूप में निर्दिष्ट करें। उदाहरण के लिए, 50% 50% छवि को तत्व की चौड़ाई और ऊंचाई के आधे आकार में सेट करता है।

`background-repeat` प्रॉपर्टी

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat प्रॉपर्टी का उपयोग तत्व की पृष्ठभूमि छवि को कैसे दोहराया जाता है, इसे नियंत्रित करने के लिए किया जाता है। डिफॉल्ट रूप से, तत्व के भीतर पृष्ठभूमि छवि क्षैतिज और लंबवत रूप से दोहराई जाती है, लेकिन आप इस प्रॉपर्टी का उपयोग करके दोहराव व्यवहार को अनुकूलित कर सकते हैं।

व्याख्या:

repeat-example क्लास छवि को लंबवत और क्षैतिज दोनों ओर दोहराकर प्रदर्शित करती है।
repeat-x-example क्लास छवि को केवल क्षैतिज रूप से दोहराती है।
no-repeat-example क्लास छवि को केवल एक बार प्रदर्शित करती है, बिना दोहराए।
space-example क्लास पृष्ठभूमि छवियों को समान रूप से व्यवस्थित करती है, उनके बीच समान अंतराल के साथ।
round-example क्लास पृष्ठभूमि छवि को स्वचालित रूप से फिर से आकार देती है ताकि वह दोहराए और पूरे तत्व को भर दे।

निर्दिष्ट किए जा सकने वाले मान

background-repeat प्रॉपर्टी को निम्न प्रकार के मान दिए जा सकते हैं।

repeat: पृष्ठभूमि छवि X-अक्ष (क्षैतिज) और Y-अक्ष (लंबवत) दोनों के साथ दोहराई जाती है। यह डिफ़ॉल्ट मान है।
repeat-x: पृष्ठभूमि छवि केवल X-अक्ष (क्षैतिज) के साथ दोहराई जाती है।
repeat-y: पृष्ठभूमि छवि केवल Y-अक्ष (लंबवत) के साथ दोहराई जाती है।
no-repeat: पृष्ठभूमि छवि को दोहराया नहीं जाता है और इसे केवल एक बार प्रदर्शित किया जाता है।
space: पृष्ठभूमि छवि को नियमित अंतराल पर दोहराया जाता है, जिसमें बीच का अंतर समान होता है।
round: पृष्ठभूमि छवि दोहराई जाती है, लेकिन पूरे तत्व को भरने के लिए आकार समायोजित किया जाता है। छवि का आकार बदला जा सकता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

बॉक्स मॉडल से संबंधित CSS गुण बॉक्स मॉडल सजावट से संबंधित CSS गुण

पृष्ठभूमि-संबंधित CSS गुण

YouTube Video

पूर्वावलोकन के लिए HTML बनाना

पृष्ठभूमि और सजावट

background-color गुण

व्याख्या:

background-image गुण

व्याख्या:

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-image प्रॉपर्टी के महत्वपूर्ण बिंदु।

background-position प्रॉपर्टी।

व्याख्या:

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-size गुण

व्याख्या:

विभिन्न प्रकार के मान जिन्हें निर्दिष्ट किया जा सकता है

background-repeat प्रॉपर्टी

व्याख्या:

निर्दिष्ट किए जा सकने वाले मान

YouTube Video

`background-color` गुण

`background-image` गुण

`background-image` प्रॉपर्टी के महत्वपूर्ण बिंदु।

`background-position` प्रॉपर्टी।

`background-size` गुण

`background-repeat` प्रॉपर्टी