कैसे एक div के भीतर (पृष्ठभूमि) छवि केंद्र के लिए?

Question

क्या पृष्ठभूमि में पृष्ठभूमि छवि को केंद्र में रखना संभव है? मैंने हर चीज के बारे में कोशिश की है - लेकिन कोई सफलता नहीं:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

क्या यह संभव है?

Answer 1

#doit {
    background: url(url) no-repeat center;
}

Comments

धन्यवाद। केंद्र के लिए विशिष्ट सीएसएस "पृष्ठभूमि-स्थिति: केंद्र;"

— अपराह्न

@ ग्रीन: स्प्राइट बैकग्राउंड इमेज के लिए मेरा जवाब देखें।

— क्लेटन

यदि आप चाहते हैं कि पूरी div छवि से भरी हो और कोई अतिरिक्त जगह का उपयोग न किया background-size: cover; जाए। यदि आप चाहते हैं कि पूरी छवि बिना किसी हिस्से के कटे या फैले हुए दिखाई दे, तो आप उपयोग करना चाहते हैंbackground-size: contain;

— Zlerp

Answer 2

प्रयत्न background-position:center;

संपादित करें: चूंकि इस सवाल को बहुत सारे विचार मिल रहे हैं, इसके अतिरिक्त कुछ अतिरिक्त जानकारी जोड़ने के लायक है:

text-align: center काम नहीं करेगा क्योंकि पृष्ठभूमि छवि दस्तावेज़ का हिस्सा नहीं है और इसलिए प्रवाह का हिस्सा नहीं है।

background-position:centerके लिए आशुलिपि है background-position: center center; ( background-position: horizontal vertical);

Comments

वास्तव में आपको बस जरूरत हैbackground-position:center;

— डेव सैग

चयनित उत्तर मेरी पूरी पृष्ठभूमि को किसी कारण से गायब होने का कारण बनता है (निष्पक्ष होने के लिए मैं कुछ jquery सामग्री कर रहा हूं जो इसके कारण हो सकता है?), लेकिन यह उत्तर काम करता है। वोट दें।

— बोगी जूल

Answer 3

पृष्ठभूमि-स्थिति का उपयोग करें:

background-position: 50% 50%;

Comments

उपयोगी है यदि आपको छवि को क्षैतिज रूप से केंद्रित करने की आवश्यकता है लेकिन शीर्ष पर खड़ी है: पृष्ठभूमि-स्थिति: 50% 0%;

— सेबास्टियन गिक्वेल

50% 0 तब छोटा होता है ;-) सीएसएस में, आपको किसी भी यूनिट की आवश्यकता नहीं होती है जब मूल्य 0

— कैप्सूल

Answer 4

पृष्ठभूमि या छवि की स्थिति के लिए आपको background-positionसंपत्ति का उपयोग करना चाहिए । बैकग्राउंड-पोजीशन प्रॉपर्टी के एलिमेंट topऔर leftसाइड्स से बैकग्राउंड इमेज की शुरुआती पोजिशन सेट करती है । CSS Syntax है background-position : xvalue yvalue;।

"xvalue" और "yvalue" समर्थित मान लंबाई इकाइयां हैं pxऔर प्रतिशत और दिशा नाम जैसे बाएँ, दाएँ और आदि।

"Xvalue" पृष्ठभूमि की क्षैतिज स्थिति है और तत्व के ऊपर से शुरू होता है। इसका मतलब है अगर आप उपयोग करते हैं50px यह तत्वों के ऊपर से "50px" होगा। और "यावल्यू" ऊर्ध्वाधर स्थिति है जिसकी समान स्थिति है।

इसलिए यदि आप background-position: center;अपनी पृष्ठभूमि छवि का उपयोग करते हैं तो आप केंद्रित होंगे।

लेकिन मैं हमेशा इस कोड का उपयोग करता हूं:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

मुझे पता है कि यह बहुत भ्रामक है लेकिन इसका मतलब है:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

और मुझे पता है कि यह भी background-sizeएक नई संपत्ति है और संपीड़ित कोड में क्या है, /coverलेकिन इन कोड्स का मतलब है fillपृष्ठभूमि का आकार और विंडोज़ डेस्कटॉप पृष्ठभूमि में स्थिति।

आप के बारे में अधिक विवरण देख सकते background-positionमें यहाँ और background-sizeमें यहाँ ।

Answer 5

यदि आपकी पृष्ठभूमि की छवि एक लंबवत संरेखित स्प्राइट शीट है, तो आप क्षैतिज रूप से प्रत्येक स्प्राइट को इस तरह से केंद्र कर सकते हैं:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

यदि आपकी पृष्ठभूमि की छवि क्षैतिज रूप से संरेखित स्प्राइट शीट है, तो आप प्रत्येक स्प्राइट को इस तरह से लंबवत केंद्रित कर सकते हैं:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

यदि आपकी स्प्राइट शीट कॉम्पैक्ट है, या आप अपनी पृष्ठभूमि छवि को पूर्वोक्त परिदृश्यों में से एक में केंद्रित करने का प्रयास नहीं कर रहे हैं, तो ये समाधान लागू नहीं होते हैं।

Answer 6

यह मेरे लिए काम करता है:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

Answer 7

यह मेरे लिए काम करता है:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Comments

margin: 0 auto;जहां autoयह div के भीतर क्षैतिज रूप से केंद्र बनाता है। धन्यवाद!

— इओलही

Answer 8

यह मेरे लिए काम करता है:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

Answer 9

यह मेरे लिए छवि को केंद्र में संरेखित करने के लिए काम करता है।

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}