सीएसएस (ट्विटर बूटस्ट्रैप) में एक पृष्ठभूमि छवि डालें

Question

मैं अपनी वेबसाइट पर एक छवि पृष्ठभूमि कैसे जोड़ सकता हूं?

body { 
    margin: 0; 
    background: url(background.png); 
    background-size: 1440px 800px; 
    background-repeat:no-repeatdisplay: compact; 
    font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

मैंने इतना किया लेकिन मेरे पृष्ठ पर कुछ भी नहीं दिखाया गया। मैं एक सीएसएस शुरुआत कर रहा हूँ।

अपडेट किया गया:

body { 
margin: 0; 
background-image: url(.../img/background.jpg); 
background-size: 1440px 800px; 
background-repeat:no-repeat; 
display: compact; 
font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; 

Answer 1

उद्धरण में पृष्ठभूमि यूआरएल रखो।

यह होना चाहिए background: url('background.png');

डेमो काम करने के लिए here देखें।

आपको background-repeat line के साथ दो कथनों के बीच अर्धविराम गुम होने के साथ भी कोई समस्या है। यदि आपकी पृष्ठभूमि वास्तव में छोटी है तो आप उस मुद्दे के कारण इसे नहीं देख पाएंगे।

अन्य मुद्दों के बीच समाधान पर अपडेट करने के लिए,के साथ पृष्ठभूमि फ़ाइल को ../background.jpg (2 बिंदु, 3 नहीं) होना चाहिए था।

Answer 2

समस्या निम्नलिखित लाइन सही नहीं है के रूप में background-repeat के लिए बयान display के लिए अगले बयान से पहले बंद नहीं है नहीं है ...

background-repeat:no-repeatdisplay: compact; 

इस नहीं होना चाहिए

background-repeat:no-repeat; 
display: compact; 

उद्धरण जोड़ना या निकालना (मेरे अनुभव में) यूआरएल सही है तो कोई फर्क नहीं पड़ता। क्या छवि का पथ सही है? यदि आप किसी सीएसएस में संसाधन के सापेक्ष पथ देते हैं तो यह सीएसएस फ़ाइल के सापेक्ष है, न कि सीएसएस सहित फाइल।

Answer 3

क्या आपकी छवि उसी फ़ोल्डर/निर्देशिका पर आपकी सीएसएस फ़ाइल के रूप में है? यदि ऐसा है, तो आपकी छवि यूआरएल सही है। अन्यथा, यह नहीं है।

तो कोई मौका अपने फ़ोल्डर संरचना इतनी तरह है ...

वेबपेज
-index.html
-css
द्वारा - - style.css
- छवियों
- - background.png

फिर अपने सीएसएस फ़ाइल पर छवि के संदर्भ के लिए आप निम्न पथ का उपयोग करना चाहिए:

../images/background.png

तो यह पृष्ठभूमि होगी: url ('../ images/background.png');

तर्क सरल है: "../" टाइप करके एक फ़ोल्डर ऊपर जाएं (जितनी बार आपको आवश्यकता हो)। उस फ़ोल्डर को निर्दिष्ट करके एक फ़ोल्डर नीचे जाएं जिसे आप नीचे जाना चाहते हैं।

Answer 4

यदि आप जोड़ने के निम्नलिखित आप पृष्ठभूमि रंग या छवि (अपने सीएसएस)

html { 
    background-image: url('http://yoursite/i/tile.jpg'); 
    background-repeat: repeat; 
} 

.body { 
    background-color: transparent; 
} 

यह वह जगह है निर्धारित कर सकते हैं क्योंकि बी एस पृष्ठभूमि रंग के लिए और भी .container वर्ग के लिए एक सीएसएस नियम लागू होता है।

Answer 5

पृष्ठभूमि छवि प्राप्त करने के लिए एचटीएमएल, बॉडी या रैपर तत्व पर पृष्ठभूमि छवि जोड़ना पैडिंग के साथ समस्याएं पैदा करेगा। Github पर यह टिकट https://github.com/twitter/bootstrap/issues/3169 देखें। शॉनर की टिप्पणी और रचनाकारों में से एक भी इसका जवाब देता है। बनाए गए टिकट में दिया गया समाधान समस्या का समाधान नहीं करता है, लेकिन यदि आप उत्तरदायी सुविधाओं का उपयोग नहीं कर रहे हैं तो कम से कम चीजें चल रही हैं।

यह मानते हुए कि आप उत्तरदायी सुविधाओं के बिना कंटेनर का उपयोग कर रहे हैं, और 960px की चौड़ाई है, और 10px गद्दी हासिल करना चाहते हैं, तो आप सेट:

.container { 
    min-width: 940px; 
    padding: 10px; 
} 

Answer 6

और आप पृष्ठभूमि छवि (के लिए दोहराना नहीं कर सकते हैं अगर कृत्रिम कारण), तो यह आसान JQuery प्लगइन पृष्ठभूमि छवि को विंडो में फिट करेगा।

Backstretch http://srobbin.com/jquery-plugins/backstretch/

अच्छा काम करता है ...

~ चीयर्स!

Answer 7

अधिक प्रतिरूपकता के लिए और मामले में आप कई पृष्ठभूमि छवियों है कि आप भी आप आप प्रत्येक छवि के लिए एक वर्ग बना सकते हैं चाहते हैं को शामिल करना चाहते हैं: छवि

.background-image1 
{ 
background: url(image1.jpg); 
} 
.background-image2 
{ 
background: url(image2.jpg); 
} 

और फिर सम्मिलित भी आप चाहते हैं एक जोड़कर div

<div class='background-image1'> 
    <div class="page-header text-center", style='margin: 20px 0 0px;'> 
     <h1>blabaaboabaon</h1> 
    </div> 
</div> 

Answer 8

body { 
    background-image: url(your image link); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 
    background-color: #464646; 
} 

Answer 9

समस्या भी अपने शैली पत्रक आयात का आदेश हो सकता है। मुझे बूटस्ट्रैप आयात के नीचे अपनी कस्टम स्टाइल शीट आयात को स्थानांतरित करना पड़ा।