सीएसएस पृष्ठभूमि गुण

CSS पृष्ठभूमि गुण हमें तत्वों की पृष्ठभूमि को स्टाइल करने में मदद करते हैं। CSS पृष्ठभूमि गुण किसी तत्व की पृष्ठभूमि को निर्दिष्ट करने के लिए एक आशुलिपि है। बैकग्राउंड-कलर, बैकग्राउंड-इमेज, बैकग्राउंड-रिपीट, बैकग्राउंड-पोजिशन, बैकग्राउंड-क्लिप, बैकग्राउंड-साइज, बैकग्राउंड-ओरिजिन और बैकग्राउंड-अटैचमेंट एक साथ CSS बैकग्राउंड प्रॉपर्टीज को शामिल करते हैं।

सिंटैक्स

CSS बैकग्राउंड प्रॉपर्टी का सिंटैक्स इस प्रकार है-

Selector {
   background: /*value*/
}

उदाहरण

निम्नलिखित उदाहरण CSS पृष्ठभूमि गुण को दर्शाते हैं -

<!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>

आउटपुट

यह निम्न आउटपुट देता है

सीएसएस पृष्ठभूमि गुण