CSS background शॉर्टहैंड प्रॉपर्टी का उपयोग किसी एलिमेंट के लिए बैकग्राउंड को परिभाषित करने के लिए किया जाता है। background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin और background-attachment मिलकर CSS background प्रॉपर्टीज बनाते हैं।
सिंटैक्स
CSS background प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { background: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS background प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> body { background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%; } div { padding: 100px; background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left; } </style> </head> <body> <h2>Learn</h2> <ul> <li>Java</li> <li>C#</li> <li>Android</li> <li>iOS</li> <li>C++</li> <li>C</li> </ul> <div></div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
एक और उदाहरण
<!DOCTYPE html> <html> <head> <style> table, tr,td{ margin: auto; border: 2px solid red; padding: 40px; } td { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat; } #demo { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat; } table { background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center; } </style> </head> <body> <h2>Learning is fun</h2> <table> <tr><td></td></tr> <tr><td id="demo"></td></tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
