मूल के सापेक्ष पृष्ठभूमि छवि के लिए प्रारंभिक स्थिति निर्धारित करने के लिए CSS पृष्ठभूमि-स्थिति गुण का उपयोग किया जाता है।
सिंटैक्स
CSS बैकग्राउंड-पोजिशन प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
background-position: /*value*/
} निम्नलिखित उदाहरण CSS पृष्ठभूमि-स्थिति गुण को दर्शाते हैं -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 30px;
padding: 100px;
background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
background-repeat: no-repeat;
background-position: 15% 20%, top, right;
border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 20px;
padding: 80px;
background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
background-repeat: no-repeat;
background-position: 0 0, bottom right;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
