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

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

सिंटैक्स

सिलेक्टर {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

वैल्यूज

वैल्यू	विवरण
`no-repeat`	इमेज बिल्कुल भी दोहराई नहीं जाएगी।
`repeat-x`	इमेज X अक्ष पर दोहराई जाएगी।
`repeat-y`	इमेज Y अक्ष पर दोहराई जाएगी।
`repeat`	इमेज X अक्ष और Y अक्ष दोनों पर दोहराई जाएगी।
`space`	इमेज इतनी बार दोहराई जाएगी कि क्षेत्र पूरी तरह से भर जाए, यदि यह संभव नहीं है, तो इमेज के बीच खाली जगह जोड़ दी जाती है।
`round`	इमेज इस तरह दोहराई जाएगी कि क्षेत्र में डिज़ाइन की पूरी संख्या में इमेज फिट हो जाएं, यदि ऐसा करना संभव नहीं है, तो बैकग्राउंड इमेज को स्केल कर दिया जाता है।

डिफॉल्ट वैल्यू: repeat - पूरी स्क्रीन को पैटर्न से कवर करती है।

उदाहरण

डिफॉल्ट रूप से, बैकग्राउंड इमेज पूरे एलिमेंट को टाइल की तरह भर देगी:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

आइए इसे सेट करते हैं ताकि इमेज दोहराई न जाए:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

और अब इमेज को X अक्ष पर दोहराएं:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

और अब Y अक्ष पर:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

अक्षों पर दोहराई जाने वाली इमेज को background-position प्रॉपर्टी का उपयोग करके पोजिशन किया जा सकता है:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

आइए देखते हैं कि space वैल्यू कैसे काम करती है:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

उदाहरण

आइए देखते हैं कि round वैल्यू कैसे काम करती है:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

यह भी देखें

background प्रॉपर्टी,
जो बैकग्राउंड के लिए एक शॉर्टहैंड प्रॉपर्टी है