सीएसएस बैकग्राउंड-पोजिशन-एक्स एट्रिब्यूट

वर्णन और उपयोग

background-position-x पृष्ठभूमि छवि को x अक्ष पर स्थानांकित करने वाले गुण को सेट करता है。

सूचना:डिफ़ॉल्ट में, पृष्ठभूमि छवि एलिमेंट के बायाँ और ऊपर के कोने पर रखी जाती है और उच्च और नीचे तथा बाईं और दायाँ दिशा में दोहराई जाती है。

उदाहरण

उदाहरण 1

x अक्ष पर पृष्ठभूमि छवि को कैसे स्थानांकित किया जाता है:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

अपने आप प्रयोग करें

उदाहरण 2

पृष्ठभूमि छवि को दायाँ तरफ स्थानांकित करने के लिए:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

अपने आप प्रयोग करें

उदाहरण 3

प्रतिशत स्थानांकन के द्वारा पृष्ठभूमि छवि का इस्तेमाल किया जाता है:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

अपने आप प्रयोग करें

उदाहरण 4

पिक्सल स्थानांकन के द्वारा पृष्ठभूमि छवि का इस्तेमाल किया जाता है:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

अपने आप प्रयोग करें

उदाहरण 5

विभिन्न पृष्ठभूमि गुणों का इस्तेमाल करके अपने पात्र को आवरीत करने वाली पृष्ठभूमि छवि बनाएं:

.hero-image {
  background-image: url("photographer.jpg"); /* इस्तेमाल की छवि */
  background-color: #cccccc; /* यदि इमेज उपलब्ध नहीं है, तो इस रंग का इस्तेमाल करें */
  height: 300px; /* आवश्यकता से ऊंचाई सेट करें */
  background-position-x: center; /* इमेज को मध्य में स्थापित करें */
  background-repeat: no-repeat; /* इमेज को दोहराने को नहीं देखें */
  background-size: cover; /* बैकग्राउंड इमेज का आकार को पूरे विन्यास को कवर करने के लिए समायोजित करें */
}

अपने आप प्रयोग करें

CSS व्याकरण

background-position-x: value;

गुण मूल्य

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

शिक्षा:CSS पृष्ठभूमि

CSS संदर्भ:background-image गुण

CSS संदर्भ:background-position गुण

CSS संदर्भ:background-position-y गुण

HTML DOM संदर्भ:backgroundPosition गुण