सीएसएस का उपयोग करके, एक पृष्ठभूमि छवि को केंद्रित करना

Question

मैं एक पृष्ठभूमि छवि को केंद्र में रखना चाहता हूं। कोई div प्रयोग नहीं किया गया है, यह CSS स्टाइल है:

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

ऊपर सीएसएस सभी पर टाइल करता है और इसे केंद्र करता है, लेकिन आधी छवि नहीं देखी जाती है, यह सिर्फ एक तरह की चाल है। मैं जो करना चाहता हूं वह छवि को केंद्र में रखता है। क्या मैं 21 "स्क्रीन पर भी देखने के लिए छवि को अपना सकता हूं?

Comments

अब यह छवि के आकार और ब्राउज़र के आकार पर निर्भर करेगा, है ना?

— nikc.org

@ मिच +1, मुझे पता है, लेकिन यह जानने की जरूरत है कि क्या कोई काम था

— X10nD

Answer 1

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

वह काम करना चाहिए।

यदि नहीं, तो इसे पृष्ठभूमि बनाने के divलिए छवि और उपयोग के साथ क्यों नहीं बनाया z-indexगया? यह शरीर पर पृष्ठभूमि छवि की तुलना में बहुत आसान होगा।

उस प्रयास के अलावा:

background-position: 0 100px;/*use a pixel value that will center it*/या मुझे लगता है कि आप 50% का उपयोग कर सकते हैं यदि आपने अपना शरीर min-height100% पर सेट किया है ।

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Comments

यह केंद्रीकृत करता है, लेकिन केवल आधी स्क्रीन को प्रदर्शित करता है, काश

— स्टैकओवरफ्लो में

आप एक स्क्रीनशॉट बना सकते हैं और इसे अपने सर्वर या फ़ोटोज़ होस्टिंग साइट जैसे कि photobucket.com पर अपलोड कर सकते हैं, या www.jsfiddle.net पर एक अस्थायी उदाहरण बना सकते हैं और हमारे लिए एक लिंक पोस्ट कर सकते हैं। आपने जो कहा है, वह छवि 1600x1200 है और अधिकांश स्क्रीन रिज़ॉल्यूशन उस उच्च पर नहीं जाते हैं, अपनी छवि को फिट करने के लिए आकार बदलने का प्रयास करें। मैं उदाहरण के लिए 1440x900 पर एक वाइडस्क्रीन मॉनिटर का उपयोग करता हूं।

— काइल

स्क्रीनशॉट - imagevat.com/picview.php?ig=6179 मैं नहीं यकीन है कि jsfiddle लिए छवियों को अपलोड करने के लिए कैसे, अगर आप वहाँ मेरी मदद कर सकते हूं jsfiddle.net/yWrQP

— X10nD

Jsfiddle में एक छवि जोड़ने के लिए, बस पूर्ण http पथ का उपयोग करें EX: background-image:url(http://www.myurl.com/images/image.jpg);इसे CSS में रखें।

— काइल

मेरे पास यह करने के लिए सर्वर नहीं है, लेकिन एक इमेजहोस्टिंग साइट का उपयोग किया है, लेकिन अभी भी इसे अभी जांचें

— X10nD

Answer 2

मैं इस कोड का उपयोग करता हूं, यह अच्छा काम करता है

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Comments

धन्यवाद! मुझे यह भी नहीं पता था कि वेबकिट, आदि के लिए अलग-अलग घोषणाएँ थीं ...

— माइक रैपादास

विक्टर, मैंने आपके कोड का बहुत उपयोग किया है, लेकिन ऐसा लगता है कि यह अब काम नहीं करता है। मैंने बैकग्राउंड-अटैचमेंट जोड़ा: फिक्स्ड; लेकिन यह मेरे iPad ब्राउज़र पर काम नहीं कर रहा है ...

— वादिम

केवल -webkit-background-sizeविशेष घोषणाओं से ही मौजूद है।

— BigBang1112

Answer 3

मुझे लगता है कि यह वही है जो चाहता है:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

Comments

पृष्ठभूमि-लगाव मेरे लिए मुद्दा तय;)

— kdoteu

Answer 4

प्रयत्न

background-position: center center;

Comments

डबल सेंटर सेंटर कैसे काम करते हैं? वैसे भी यह मुद्दे को हल नहीं करता है, अभी भी वही है

— X10nD

@ जीन: चश्मे को देखें, पृष्ठभूमि-स्थिति वास्तव में वास्तव में 2 मान (क्षैतिज और ऊर्ध्वाधर) ले सकती है। w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud

@ अपने काम नहीं कर रहा है, छवि टाइल है। छवि एक 1600x1200 और मेरी स्क्रीन का आकार 1280x800

— X10nD

@ आप एक पृष्ठभूमि छवि (अभी तक) का आकार परिवर्तन नहीं कर सकते। यह सीएसएस 3 में संभव है लेकिन यह अभी तक व्यापक रूप से समर्थित नहीं है। center centerके साथ मिलकर background-repeat: no-repeatआप क्या करना चाहिए - छवि को केंद्र में रखना चाहिए।

— पेका

@ जीन आह, मैं अब आपके स्क्रीन शॉट से देख रहा हूं। आप देने की आवश्यकता bodyएक min-heightकी 100%तो यह पूर्ण स्क्रीन भर में फैली हुई है। वह इसे क्रमबद्ध कर सकता है।

— पेक्का

Answer 5

ऐशे ही:

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

Answer 6

आपके कोड में कोई त्रुटि है। आप बैकग्राउंड-इमेज प्रॉपर्टी पर फुल सिंटैक्स और शॉर्टहैंड नोटेशन के मिश्रण का उपयोग कर रहे हैं। यह नो-रिपीट को नजरअंदाज करने का कारण बन रहा है, क्योंकि यह बैकग्राउंड-इमेज प्रॉपर्टी के लिए वैल्यू नहीं है।

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

निम्नलिखित में से एक बनना चाहिए:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

या

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

संपादित करें: आपकी छवि 'स्केलिंग' समस्या के लिए, आप इस प्रश्न के उत्तर को देखना चाहते हैं ।

Comments

'पृष्ठभूमि: url (../ images / images2.jpg) केंद्र केंद्र no-repeat;' काम नहीं करता है, क्योंकि वाक्य रचना गलत है और दूसरों को भी काम नहीं करता है

— X10nD

Answer 7

इसे इस्तेमाल करे background-position: center top;

यह आपके लिए टोटका करेगा।

Answer 8

background-repeat:no-repeat;
background-position:center center;

HTML 4.01 'STRICT' सिद्धांत का उपयोग करते समय पृष्ठभूमि छवि को लंबवत रूप से केंद्र में नहीं रखता है।

जोड़ना:

background-attachment: fixed;

समस्या को ठीक करना चाहिए

(अलेक्जेंडर सही है)

Answer 9

बस प्रतिस्थापित करें

background-image:url(../images/images2.jpg) no-repeat;

साथ में

background:url(../images/images2.jpg)  center;

Answer 10

यदि ऊपर दिए गए उत्तरों से आप संतुष्ट नहीं हैं तो इसका उपयोग करें

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Answer 11

एक ही समस्या थी। प्रयुक्त प्रदर्शन और मार्जिन गुण और यह काम किया।

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

Answer 12

background-position: center center;

मेरे बिना काम नहीं करता ...

background-attachment: fixed;

दोनों एक्स और वाई अक्ष पर मेरी छवि केंद्रित का उपयोग कर

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Answer 13

केवल एक चीज जो मेरे लिए काम करती है ..

margin: 0 auto