बैकग्राउंड प्रॉपर्टी का इस्तेमाल किसी एलीमेंट से जुड़ी बैकग्राउंड इमेज को सेट करने या पाने के लिए किया जाता है। यह एक शॉर्टहैंड प्रॉपर्टी है और 8 प्रॉपर्टी में हेरफेर कर सकती है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैबैकग्राउंड प्रॉपर्टी सेट करना -
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
मान
निम्नलिखित मान हैं -
| Sr.No <वें शैली ="पाठ-संरेखण:केंद्र; चौड़ाई:90.2338%;">मान और विवरण | |
|---|---|
| 1 | रंग तत्व पृष्ठभूमि रंग सेट करने के लिए। |
| 2 | छवि तत्व पृष्ठभूमि छवि सेट करने के लिए। |
| 3 | दोहराएं पृष्ठभूमि छवि को कैसे दोहराया जाएगा यह निर्धारित करने के लिए। |
| 4 | अनुलग्नक बैकग्राउंड इमेज को फिक्स पर सेट करने के लिए या पेज के साथ स्क्रॉल करने के लिए। |
| 5 | स्थिति पृष्ठभूमि छवि प्रारंभिक स्थिति सेट करने के लिए। |
| 6 | आकार पृष्ठभूमि छवि का आकार निर्धारित करने के लिए। |
| 7 | मूल पृष्ठभूमि स्थिति क्षेत्र निर्दिष्ट करने के लिए। |
| 8 | क्लिप यह निर्धारित करने के लिए कि पृष्ठभूमि छवि कितनी दूर पेंट की गई है। |
उदाहरण
आइए बैकग्राउंड प्रॉपर्टी के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
चेंज बैकग्राउंड इमेज पर क्लिक करने पर -
