सीएसएस पृष्ठभूमि दोहरा

CSS background-repeat

डिफ़ॉल्ट में,background-image इस गुण को स्तरीय और विकर्णीय दिशा में छवि दोहराता है。

कुछ छवियाँ केवल स्तरीय या विकर्णीय दिशा में दोहराई होनी चाहिए, नहीं तो वे कमजोर दिखेंगी, जैसा कि नीचे दिखाया गया है:

इस्टेंस

body {
  background-image: url("gradient_bg.png");
}

स्वयं को प्रयोग करें

यदि ऊपरी छवि केवल स्तरीय दिशा में दोहराई होती है (background-repeat: repeat-x;) का पृष्ठभूमि बेहतर दिखेगा:

इस्टेंस

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

स्वयं को प्रयोग करें

सूचना:यदि आप छवि को विकर्णीय दिशा में दोहराना चाहते हैं, तो इसे सेट करें background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat इस अट्रिब्यूट का उपयोग बैकग्राउंड इमेज को एक बार ही दिखाने के लिए किया जाता है:

इस्टेंस

बैकग्राउंड इमेज एक बार ही दिखाया जाएगा:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

स्वयं को प्रयोग करें

इस उदाहरण में, बैकग्राउंड इमेज और टेक्स्ट एक ही स्थान पर रखे गए हैं।हम इसकी स्थिति बदलना चाहते हैं ताकि इमेज टेक्स्ट को बहुत नहीं बाधित करे。

CSS background-position

background-position इस अट्रिब्यूट का उपयोग बैकग्राउंड इमेज के स्थान को निर्दिष्ट करने के लिए किया जाता है。

इस्टेंस

बैकग्राउंड इमेज को उच्च-दायाँ कोने में रखें:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

स्वयं को प्रयोग करें