सीएसएस पृष्ठभूमि दोहरा
- पिछला पृष्ठ सीएसएस पृष्ठभूमि इमेज
- अगला पृष्ठ सीएसएस पृष्ठभूमि जोड़
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; }
- पिछला पृष्ठ सीएसएस पृष्ठभूमि इमेज
- अगला पृष्ठ सीएसएस पृष्ठभूमि जोड़