tutorial - what is css in english




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

आपके कोड में एक त्रुटि है। आप पृष्ठभूमि-छवि प्रॉपर्टी पर पूर्ण वाक्यविन्यास और शॉर्टंड नोटेशन का मिश्रण उपयोग कर रहे हैं। यह दोहराने के लिए दोहराने का कारण बन रहा है, क्योंकि यह पृष्ठभूमि-छवि संपत्ति के लिए मान्य मान नहीं है।

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;
}

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

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

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

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


इस background-position: center top; प्रयास करें background-position: center top;

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


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

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

प्रयत्न

background-position: center center;

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

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

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

margin: 0 auto

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

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

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*/ या मुझे लगता है कि यदि आप अपने शरीर को min-height 100% पर सेट करते हैं तो आप 50% का उपयोग कर सकते हैं।

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%;
}




css