CSS बैकग्राउंड प्रॉपर्टीज हमें एलिमेंट्स के बैकग्राउंड को स्टाइल करने में मदद करती हैं। CSS background प्रॉपर्टी किसी एलिमेंट के बैकग्राउंड को निर्दिष्ट करने का एक शॉर्टहैंड है। background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin और background-attachment मिलकर CSS बैकग्राउंड प्रॉपर्टीज बनाते हैं।
सिंटैक्स
CSS background प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { background: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS background प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> #main { margin: auto; width: 300px; background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-size: cover; } #im { height: 200px; width: 200px; background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="main"> <div id="im"></div> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 10%, 40% 40%, 90% 10%; } </style> </head> <body> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
