CSS3 - मल्टी बैकग्राउंड
मल्टी बैकग्राउंड
CSS मल्टी बैकग्राउंड प्रॉपर्टी का उपयोग HTML कोड के बिना एक समय में एक या एक से अधिक इमेजेस को जोड़ने के लिए किया जाता है। हम अपनी आवश्यकता के अनुसार इमेजेज को जोड़ सकते हैं। मल्टी बैकग्राउंड इमेजों का सैंपल सिंटैक्स इस प्रकार है -
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}सबसे अधिक उपयोग किए जाने वाले मान नीचे दिखाए गए हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | background एक अनुभाग में सभी पृष्ठभूमि छवि गुणों को सेट करने के लिए उपयोग किया जाता है |
| 2 | background-clip पृष्ठभूमि के पेंटिंग क्षेत्र को घोषित करने के लिए उपयोग किया जाता है |
| 3 | background-image पृष्ठभूमि छवि निर्दिष्ट करने के लिए उपयोग किया जाता है |
| 4 | background-origin पृष्ठभूमि छवियों की स्थिति निर्दिष्ट करने के लिए उपयोग किया जाता है |
| 5 | background-size पृष्ठभूमि छवियों का आकार निर्दिष्ट करने के लिए उपयोग किया जाता है |
उदाहरण
निम्नलिखित उदाहरण है जो बहु पृष्ठभूमि छवियों को प्रदर्शित करता है।
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>www.tutorialspoint.com</h1>
<p>
Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new
skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing
to academics and much more..
</p>
</div>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
बहु पृष्ठभूमि का आकार
मल्टी बैकग्राउंड प्रॉपर्टी को अलग-अलग छवियों के लिए अलग-अलग आकार जोड़ने के लिए स्वीकार किया जाता है। नमूना सिंटैक्स नीचे दिखाया गया है -
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}जैसा कि एक उदाहरण के ऊपर दिखाया गया है, प्रत्येक छवि में विशिष्ट आकार 50px, 130px और ऑटो आकार के होते हैं।