हम बैकग्राउंड एट्रिब्यूट का उपयोग करके किसी एलीमेंट के बैकग्राउंड प्रॉपर्टीज को निर्दिष्ट कर सकते हैं। यह निम्न के लिए मान ले सकता है:बैकग्राउंड-कलर, बैकग्राउंड-इमेज, बैकग्राउंड-रिपीट, बैकग्राउंड-पोजिशन, बैकग्राउंड-क्लिप, बैकग्राउंड-साइज़, बैकग्राउंड-ओरिजिन और बैकग्राउंड-अटैचमेंट।
सिंटैक्स
CSS बैकग्राउंड प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
background: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS पृष्ठभूमि गुण को दर्शाते हैं -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
font-size: 1.2em;
color: black;
}
h2 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
}
p {
box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color: bisque;
}
div {
margin: auto;
background-color:orange;
width: 40%;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
