सीएसएस पृष्ठभूमि-छवि संपत्ति
उदाहरण
<body> तत्व के लिए पृष्ठभूमि-छवि सेट करें:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
उदाहरण
<body> तत्व के लिए दो पृष्ठभूमि चित्र सेट करें:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
गुण किसी तत्व के background-imageलिए एक या अधिक पृष्ठभूमि चित्र सेट करता है।
डिफ़ॉल्ट रूप से, एक पृष्ठभूमि-छवि एक तत्व के ऊपरी-बाएँ कोने में रखी जाती है, और लंबवत और क्षैतिज दोनों तरह से दोहराई जाती है।
युक्ति: किसी तत्व की पृष्ठभूमि तत्व का कुल आकार है, जिसमें पैडिंग और बॉर्डर (लेकिन मार्जिन नहीं) शामिल हैं।
युक्ति: यदि छवि अनुपलब्ध है, तो हमेशा उपयोग करने के लिए पृष्ठभूमि-रंग सेट करें।
| डिफ़ॉल्ट मान: | कोई नहीं |
|---|---|
| विरासत में मिला: | नहीं |
| एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
| संस्करण: | CSS1 + CSS3 में नए मान |
| जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.backgroundImage="url(img_tree.gif)" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
नोट: IE8 और इससे पहले के संस्करण एकाधिक पृष्ठभूमि छवियों का समर्थन नहीं करते हैं।
सीएसएस सिंटेक्स
background-image: url|none|initial|inherit;
सम्पत्ति की कीमत
| Value | Description |
|---|---|
| url('URL') | The URL to the image. To specify more than one image, separate the URLs with a comma |
| none | No background image will be displayed. This is default |
| conic-gradient() | Sets a conic gradient as the background image. Define at least two colors |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) |
| radial-gradient() | Sets a radial gradient as the background image. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
<body> एलीमेंट के लिए दो बैकग्राउंड इमेज सेट करता है। पहली छवि को केवल एक बार (बिना दोहराव के) दिखाई दें, और दूसरी छवि को दोहराने दें:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
उदाहरण
"हीरो" छवि बनाने के लिए विभिन्न पृष्ठभूमि गुणों का उपयोग करें:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
उदाहरण
<div> तत्व के लिए पृष्ठभूमि छवि के रूप में एक रैखिक-ढाल (दो रंग) सेट करता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
उदाहरण
<div> तत्व के लिए पृष्ठभूमि छवि के रूप में एक रैखिक-ढाल (तीन रंग) सेट करता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
उदाहरण
रिपीटिंग-लीनियर-ग्रेडिएंट () फ़ंक्शन का उपयोग लीनियर ग्रेडिएंट्स को दोहराने के लिए किया जाता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
उदाहरण
एक <div> तत्व के लिए पृष्ठभूमि छवि के रूप में एक रेडियल-ढाल (दो रंग) सेट करता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
उदाहरण
एक <div> तत्व के लिए पृष्ठभूमि छवि के रूप में एक रेडियल-ढाल (तीन रंग) सेट करता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
उदाहरण
रेडियल ग्रेडिएंट को दोहराने के लिए रिपीटिंग-रेडियल-ग्रेडिएंट () फ़ंक्शन का उपयोग किया जाता है:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस पृष्ठभूमि , सीएसएस पृष्ठभूमि (उन्नत) , सीएसएस ग्रेडिएंट्स
एचटीएमएल डोम संदर्भ: पृष्ठभूमि छवि संपत्ति