बूटस्ट्रैप उत्तरदायी पृष्ठभूमि छवि

Question

बूटस्ट्रैप का उपयोग करके मैं कैसे बना सकता हूं, एक डिवी धारक पृष्ठभूमि के रूप में विज़िटर को फिट करने के लिए एक छवि के रूप में होता है? छवि की एक निश्चित ऊंचाई और चौड़ाई है। यदि स्क्रीन छोटा है तो x, y अतिप्रवाह नहीं होने के लिए आकार बदलना चाहिए।

Answer 1

आप background-size इस तरह इस्तेमाल कर सकते हैं:

div.someclass { 
    background-size: cover; 
} 

वहाँ @Chris Coyier से एक अच्छा लेख में कुछ तकनीक दिखा रहा है: http://css-tricks.com/perfect-full-page-background-image/

Answer 2

मैं बहुत बूटस्ट्रैप में अनुभवी नहीं हूँ, लेकिन मुझे लगता है कि कोई इस तरह के सुविधा। मैं आपको अपनी पृष्ठभूमि को अनुकूलित करने के लिए अपनी "बूटस्ट्रैप थीम", एक शुद्ध सीएसएस या कम फ़ाइल बनाने की सलाह देता हूं।

आप बस इस्तेमाल कर सकते हैं:

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png); 
    background-size: cover; 
} 

इस कोड को दोनों आयामों में अपनी पृष्ठभूमि छवि फैला है, लेकिन यह, छवि के कुछ भागों में कटौती जब तक स्क्रीन राशन छवि अनुपात के समान है। ,

body{ 
     background-image: url('../url') ; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     height:100%; 

    } 

Answer 3

यह मेरे लिए काम किया

div.someclass{ 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

यह अपनी पृष्ठभूमि छवि उत्तरदायी कर देगा, यानी यह के आकार के अनुसार फिट होगा जिस पृष्ठ को पृष्ठ पर देखा गया है।

div.someclass{ 
margin-top:5%; 
} 

परिवर्तन ऊपर 5%:

दूसरा, मुख्य रूप सामग्री किसी भी डिवाइस पर ऊपर से एक उचित मार्जिन रखने के लिए div तुम सिर्फ शीर्ष पर एक रिश्तेदार मार्जिन मुख्य सामग्री के लिए बनाया दे रहा है आपकी आवश्यकता के अनुसार।

Answer 4

पहले पृष्ठभूमि छवि के लिए:

body 
{ 
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed; 
    background-size: cover; 
} 

Answer 5

body { 
    background="imagename.jpg"; 
    }