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

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

सिंटैक्स

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

वैल्यूज

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

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

यह भी देखें