Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

CSS में पृष्ठभूमि छवि की स्थिति को नियंत्रित करने के लिए कौन सा गुण उपयोग किया जाता है?

पृष्ठभूमि में छवि की स्थिति को नियंत्रित करने के लिए, background-position गुण का उपयोग करें।

उदाहरण

निम्न कोड चलाकर देखें कि background-position गुण कैसे काम करता है। यह पृष्ठभूमि छवि की स्थिति को बाईं ओर से 30 पिक्सेल दूर सेट करता है:

<html>
  <head>
    <style>
      body {
        background-image: url("/css/images/css.jpg");
        background-position: 30px;
      }
    </style>
  </head>
  <body>
    <p>Tutorials point</p>
  </body>
</html>

नोट: background-position एक या दो मान स्वीकार करता है (क्षैतिज और लंबवत)। एक मान देने पर दूसरा डिफ़ॉल्ट रूप से center होता है।

  1. - CSS के साथ रेडियल ग्रेडिएंट को पृष्ठभूमि छवि के रूप में सेट करें

    radial-gradient() CSS फ़ंक्शन का उपयोग करके रेडियल ग्रेडिएंट को पृष्ठभूमि छवि के रूप में सेट करें। यह फ़ंक्शन एक केंद्र बिंदु से बाहर की ओर फैलने वाला ग्रेडिएंट बनाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> #demo { height: 200px; back

  1. CSS में पोजिशन प्रॉपर्टी से एलिमेंट्स अलाइन करना CSS में पोजिशन प्रॉपर्टी से एलिमेंट्स अलाइन करना

    हम CSS पोजिशनिंग स्कीमा मेथड्स (फिक्स्ड, रिलेटिव, एब्सोल्यूट और स्टैटिक) और प्रॉपर्टीज (लेफ्ट, राइट, टॉप और बॉटम) का उपयोग करके एलिमेंट्स को अलाइन कर सकते हैं। उदाहरण आइए पोजिशनिंग स्कीमा का उपयोग करके एलिमेंट्स को अलाइन करने का एक उदाहरण देखें: <!DOCTYPE html> <html> <head> <t

  1. CSS में Background शॉर्टहैंड प्रॉपर्टी CSS में Background शॉर्टहैंड प्रॉपर्टी

    CSS background शॉर्टहैंड प्रॉपर्टी का उपयोग किसी एलिमेंट के लिए बैकग्राउंड को परिभाषित करने के लिए किया जाता है। background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin और background-attachment मिलकर CSS background प्रॉपर्टीज बन