CSS Background-Repeat – बैकग्राउंड इमेज रिपीटिंग को नियंत्रित करना

CSS में background-repeat प्रॉपर्टी का उपयोग यह तय करने के लिए किया जाता है कि बैकग्राउंड इमेज दोहराई जाए या नहीं। डिफ़ॉल्ट रूप से, CSS में बैकग्राउंड इमेज दोनों दिशाओं (क्षैतिज और ऊर्ध्वाधर) में रिपीट होती है। हालांकि, इस प्रॉपर्टी की मदद से आप इसे कस्टमाइज़ कर सकते हैं।

इस अध्याय में, हम background-repeat प्रॉपर्टी को विस्तार से समझेंगे और इसके विभिन्न वैल्यूज का उपयोग करके विभिन्न डिज़ाइन बनाएंगे।

---

CSS background-repeat का सिंटैक्स

सिंटैक्स:

background-repeat: value;

यहाँ value का मतलब है कि आप बैकग्राउंड इमेज को किस प्रकार रिपीट करना चाहते हैं।

---

background-repeat की वैल्यूज

1. repeat (डिफ़ॉल्ट वैल्यू)

• इमेज को दोनों दिशाओं (x-axis और y-axis) में रिपीट करता है।
• यह तब उपयोगी है जब आप एक टाइल-पैटर्न बनाना चाहते हैं।

उदाहरण:

div {
    background-image: url('tile.png');
    background-repeat: repeat;
}

2. repeat-x

• केवल क्षैतिज दिशा (x-axis) में इमेज रिपीट होती है।

उदाहरण:

div {
    background-image: url('tile.png');
    background-repeat: repeat-x;
}

3. repeat-y

• केवल ऊर्ध्वाधर दिशा (y-axis) में इमेज रिपीट होती है।

उदाहरण:

div {
    background-image: url('tile.png');
    background-repeat: repeat-y;
}

4. no-repeat

• इमेज को बिल्कुल रिपीट नहीं करता।
• केवल एक बार इमेज दिखाई देती है।

उदाहरण:

div {
    background-image: url('logo.png');
    background-repeat: no-repeat;
}

5. space

• इमेज को इस तरह से रिपीट करता है कि उनके बीच समान दूरी हो।
• इमेज के बीच कोई कटाव या ट्रिमिंग नहीं होती।

उदाहरण:

div {
    background-image: url('pattern.png');
    background-repeat: space;
}

6. round

• इमेज को रिपीट करता है और आवश्यकतानुसार इमेज का आकार (scale) बदलता है ताकि यह एलिमेंट के अंदर पूरी तरह फिट हो सके।

उदाहरण:

div {
    background-image: url('pattern.png');
    background-repeat: round;
}

---

Background-Repeat के उपयोग के उदाहरण

1. बॉडी के लिए टाइल पैटर्न

body {
    background-image: url('tile.png');
    background-repeat: repeat;
}

2. हैडर में सिंगल इमेज

header {
    background-image: url('banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

3. इमेज को केवल X-अक्ष पर रिपीट करना

div {
    background-image: url('strip.png');
    background-repeat: repeat-x;
}

4. समान दूरी के साथ इमेजेज़ (Space Value)

div {
    background-image: url('dots.png');
    background-repeat: space;
}

---

Background-Repeat के साथ Background-Position

आप background-repeat के साथ background-position का उपयोग करके इमेज की पोजिशन को नियंत्रित कर सकते हैं।

उदाहरण:

div {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: center;
}

---

Background-Repeat का उपयोग Responsive Design में

Responsive डिज़ाइन में background-repeat का सही उपयोग महत्वपूर्ण है।

Responsive Layout के लिए Tips:

1. no-repeat और background-size का उपयोग करें div { background-image: url('hero.jpg'); background-repeat: no-repeat; background-size: cover; }
2. Small Patterns के लिए repeat उपयोग करें div { background-image: url('small-pattern.png'); background-repeat: repeat; }
3. ग्रेडिएंट के साथ कॉम्बिनेशन बनाएं div { background-image: linear-gradient(to right, #ff7e5f, #feb47b), url('texture.png'); background-repeat: repeat; }

---

Background-Repeat: Common Mistakes to Avoid

1. बहुत बड़ी इमेज का उपयोग करना:
   बड़ी इमेज को रिपीट करने से पेज की लोडिंग स्पीड धीमी हो सकती है।
2. Contrast पर ध्यान न देना:
   इमेज रिपीटिंग के कारण टेक्स्ट को पढ़ने में दिक्कत हो सकती है।
3. Fallback Colors न सेट करना:
   अगर इमेज लोड न हो, तो बैकग्राउंड को साफ और प्रोफेशनल दिखाने के लिए एक बैकअप रंग सेट करें। div { background: #f0f0f0 url('bg.png') repeat; }

---

Background-Repeat के साथ Best Practices

• Tile Patterns के लिए Small Images का उपयोग करें।
  यह पेज को तेज़ी से लोड करता है।
• Space और Round वैल्यू का सही उपयोग करें।
  इनसे अधिक आकर्षक डिज़ाइन बन सकते हैं।
• Background-Position के साथ Combine करें।
  सही पोजिशनिंग आपकी इमेज को अधिक प्रभावशाली बनाती है।

---

Background-Repeat का SEO और UX पर प्रभाव

1. Loading Speed:
   रिपीटिंग इमेजेज़ का उपयोग छोटे साइज वाली इमेज के साथ करें। यह पेज स्पीड को बेहतर बनाता है।
2. User Experience:
   सही रिपीटिंग वैल्यू का उपयोग डिज़ाइन को आकर्षक बनाता है और उपयोगकर्ताओं का ध्यान खींचता है।
3. Fallback Colors:
   इमेज न लोड होने पर बैकअप रंग उपयोगकर्ता अनुभव को खराब होने से बचाता है।

---

Background-Repeat: Table of Examples

Value	Code	Description
repeat	background-repeat: repeat;	दोनों दिशाओं में इमेज रिपीट होती है।
repeat-x	background-repeat: repeat-x;	केवल x-अक्ष पर रिपीट।
repeat-y	background-repeat: repeat-y;	केवल y-अक्ष पर रिपीट।
no-repeat	background-repeat: no-repeat;	इमेज रिपीट नहीं होती।
space	background-repeat: space;	इमेज के बीच समान दूरी।
round	background-repeat: round;	इमेज को स्केल और रिपीट करता है।

---

निष्कर्ष

CSS background-repeat प्रॉपर्टी आपकी वेबसाइट को अधिक कंट्रोल और आकर्षक डिज़ाइन प्रदान करती है। सही वैल्यू और अन्य प्रॉपर्टीज़ के साथ इसका उपयोग आपके डिज़ाइन को बेहतर बनाता है।