बैकग्राउंड-रिपीट - सीएसएस-ट्रिक्स

यदि कोई background-imageसंपत्ति निर्दिष्ट की जाती है, तो background-repeatCSS में संपत्ति परिभाषित करती है कि क्या (और कैसे) यह दोहराएगा। यहाँ एक उदाहरण है:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

इस संपत्ति के लिए ये संभावित मूल्य हैं (सामान्य सामान के अलावा inherit):

• repeat: छवि को दोनों दिशाओं में टाइल करें। यह व्यतिक्रम मूल्य है।
• repeat-x: छवि को क्षैतिज रूप से टाइल करें
• repeat-y: छवि को लंबवत रूप से टाइल करें
• no-repeat: टाइल मत करो, बस एक बार छवि दिखाओ
• space: छवि को दोनों दिशाओं में टाइल करें। जब तक एक भी छवि फिट करने के लिए बहुत बड़ी नहीं है, तब तक छवि को कभी न काटें यदि कई छवियां फिट हो सकती हैं, तो उन्हें हमेशा के लिए किनारों को छूते हुए जगह दें।
• round: छवि को दोनों दिशाओं में टाइल करें। छवि को कभी भी क्रॉप न करें जब तक कि एक भी छवि फिट करने के लिए बहुत बड़ी न हो। यदि कई छवियां बचे हुए स्थान के साथ फिट हो सकती हैं, तो उन्हें भरने के लिए या उन्हें फैलाने के लिए स्थान को भरें। यदि यह आधा से कम एक छवि चौड़ाई शेष है, तो खिंचाव करें, यदि यह अधिक है, तो खिंचाव करें।

वहाँ भी दो मूल्य वाक्यविन्यास है:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

जो सिंगल-वैल्यू सिंटैक्स को दो-वैल्यू सिंटैक्स के लिए शॉर्टहैंड बनाता है। उदाहरण के लिए, roundवास्तव में है round round।

यदि आप एक से अधिक पृष्ठभूमि के साथ काम कर रहे हैं तो आप कई मानों को अलग कर सकते हैं।

डेमो

CodePen पर
CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड-रिपीट देखें
।

कैसे spaceऔर roundकाम पर इंटरएक्टिव डेमो , की तुलना में repeat:

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन द डिफरेंट `बैकग्राउंड-रिपीट`
देखें।

"नकली" बॉर्डर दिखाते हुए एक और आकार बदलने वाला डेमो:

कोडपैन पर ShopTalk शो (@shoptalkshow) द्वारा पेन फिट बॉर्डर इमेज का आसान तरीका
देखें।

यहाँ हैम्बर्गर्स के साथ एक और मज़ेदार डेमो दिखाया गया है background-repeat: round;।

सम्बंधित

• पृष्ठभूमि संलग्न
• बैकग्राउंड-क्लिप
• पृष्ठभूमि का रंग
• पृष्ठभूमि छवि
• पृष्ठभूमि मूल के
• पृष्ठभूमि स्थिति
• पृष्ठभूमि का आकार

साधन

• CSS3 कल्पना
• एमडीएन

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
1+	1+	1+	3.5+ है	4+	1+	1+

अल्पविराम से अलग किए गए कई मान सिंटे केवल फ़ायरफ़ॉक्स 3.6+ और IE 9+ में समर्थित हैं। क्षैतिज और ऊर्ध्वाधर मानों को नियंत्रित करने के लिए दो-मूल्य का सिंटैक्स केवल फ़ायरफ़ॉक्स 13+ और IE 9+ में समर्थित है। roundऔर spaceकीवर्ड को केवल फ़ायरफ़ॉक्स 49+ और IE 9+ हैं।