सीएसएस

पर बड़ी पृष्ठभूमि छवियों को दिखाने का एक अच्छा तरीका क्या मैंने question से पूछा कि यह मेरे कोड के लिए विशिष्ट था और लोग वास्तव में सहायक थे, इसलिए मैंने उस उत्तर को चुना जो अधिक असफल था, भले ही मैंने अपनी समस्या का समाधान नहीं किया ।सीएसएस

मैं livingsocial की तरह एक बड़ी सीएसएस पृष्ठभूमि प्राप्त करने की कोशिश कर रहा हूं।
मैं एक छवि 1400 x 1050
मेरे वर्तमान संकल्प है: 1280 X 1024
मेरी छवि नीचे

प्रश्न (रों) से काट दिया हो रही रखता है: क्या सीएसएस का उपयोग कर बड़ी छवि पृष्ठभूमि प्रदर्शित करने का सबसे अच्छा तरीका है?

क्या मुझे 4 अलग-अलग रिज़ॉल्यूशन में एक ही पृष्ठभूमि छवि की आवश्यकता है और फिर उस छवि का उपयोग करें जो वर्तमान रिज़ॉल्यूशन उपयोगकर्ता का उपयोग कर रहा है (क्या इसके लिए कुछ स्क्रिप्ट है)?
क्या मुझे केवल एक बड़ी छवि की आवश्यकता है जो मैं css
का उपयोग करके स्केलिंग रखता हूं अन्य लोग इस समस्या से कैसे निपट रहे हैं?

मुझे यह जानने में दिलचस्पी है कि ऐसा करने का सबसे अच्छा तरीका क्या है ताकि यह ऊपर दिए गए तीन विकल्पों में से सभी प्रस्तावों में ठीक काम करता है।

स्रोत

2011-08-16 yogashi

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

1280 चौड़े तक स्केल किए जाने पर 1400x1050 की एक छवि 960 उच्च होगी। क्या आप यही देख रहे हैं? – James

मुझे नहीं पता ... लेकिन इसे नीचे काट दिया जा रहा है। मैंने इसे अभी तक स्केल नहीं किया है। – yogashi

CSS3 के समाधान आप CSS3 में background-origin और background-size इस्तेमाल कर सकते हैं, लेकिन यह IE8 और कम द्वारा समर्थित नहीं है।

PHP समाधान आप उपयोगकर्ता ब्राउज़र के लिए विशिष्ट छवि को स्केल करने के लिए जीडी 2 कर सकते हैं, इस समाधान में जावास्क्रिप्ट भी शामिल होगा।

लिविंग सामाजिक रास्ता वे <img/> टैग के साथ एक छवि डालने और स्थिति यह तय कर रहे हैं।

<style type="text/css"> 
#background { 
    z-index: -1; /* put it under everything*/ 
    position: fixed; /* make it stay in the same place, regardless of scrolling */ 
    top: 0; 
    left: 0; 
    overflow: hidden; /* clip the image */ 
    width: 100%; /* fill the full width of browser */ 
    min-height: 950px; /* show at least this much of the image */ 
} 
#background img { 
    width: 100%; 
} 
</style> 

<body> 
    <div id="background"><img /></div> 
    <div id="content"><!-- Your Content Here --></div> 
</body>

लिविंग सामाजिक उनके <img/> टैग के लिए लागू किया कुछ और कोड है, लेकिन यह एक तरह से बेमानी लगता है, शायद यह बेहतर पार ब्राउज़र समर्थन के लिए है, मैं इसे यहाँ नहीं दिखा।

स्रोत

2011-08-16 17:13:15

धन्यवाद। हालांकि, अपनी तकनीक की कोशिश कर मेरी छवि नीचे से कट जाती है: http://jsbin.com/opokev/28 यह 'ओवरफ्लो: छुपा' की वजह से हो सकता है लेकिन मेरा संकल्प क्या होना चाहिए? क्या मुझे अपनी छवि को स्केल करना चाहिए ताकि इसे काटा न जाए? – yogashi

'ओवरफ्लो: छुपा हुआ 'यह कटौती का कारण बनता है, साथ ही' स्थिति: निश्चित 'विचार यह है कि पृष्ठभूमि केवल उतनी ही जगह लेती है जितनी इसकी आवश्यकता होती है, और कम नहीं, यह वही है जो लिविंग सोशल है करते हुए। –

यहां मेरे कोड को मेरे नए उत्तर से मेरे उदाहरण का उपयोग करके संशोधित किया गया है। http://jsbin.com/opokev/33 –

आईएमजी चौड़ाई और ऊंचाई निर्दिष्ट करने का प्रयास करें, फिर यदि यह पक्षों के किनारों पर छवि को काटता है। अन्यथा, स्क्रीन आकार के आधार पर आपकी छवि काट दिया जाएगा; या यदि आप स्क्रीन आकार से मेल खाने के लिए इसका आकार निर्धारित करते हैं, तो फैला हुआ है।

स्रोत

2011-08-16 17:01:32

सीएसएस "पृष्ठभूमि" आपको छवि के लिए स्केलिंग आकार निर्दिष्ट करने की अनुमति नहीं देता है। http://www.w3schools.com/css/css_background.asp –

सही। वह वास्तव में उस के लिए एचटीएमएल का उपयोग करना होगा। –

अधिक सटीक होने के लिए, सीएसएस 2 आपको ऐसा करने की अनुमति नहीं देता है, CSS3 करता है। CSS3 आईई 9 समेत सभी प्रमुख ब्राउज़रों द्वारा समर्थित है। IE8 के लिए कोई समर्थन नहीं है और हालांकि। सीएसएस को समझाने के लिए –

गूगल: सीएसएस AutoSize पृष्ठभूमि छवि http://css-tricks.com/3458-perfect-full-page-background-image/

स्रोत

2011-08-16 17:19:02

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

लेकिन वहाँ कुछ jQuery प्लगइन्स वहाँ, इस तरह हैं:

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

स्रोत

2011-08-16 17:48:52 Joonas

मैं आवश्यकताओं के विभिन्न समूह, दोनों मान्य हैं को देखते हुए फिर से इस सवाल का जवाब देने का फैसला किया है,; हालांकि, यह विशेष रूप से संबोधित करता है यदि आप नहीं चाहते हैं कि छवि को नीचे से काटा जाए।

डेमो:http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css"> 
#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1;  
} 
#contentContainer { 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 
#theContent { 
    /* this is all pretty much just to make it look good, nothing important in here */ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    background: #FFF; 
    width: 80px; 
    height: 80px; 
    opacity: 0.7; 
    border-radius: 6px; 
    padding: 10px; 
} 
</style> 

<div id="contentContainer"> 
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" /> 
    <div id="theContent">This is the content</div> 
</div>

स्रोत

2011-08-16 18:13:28

मैं सिर्फ सामाजिक रहने से कोड छीन और सोचा कि अगर मैं इसे यहाँ डाल यह आसान होगा:

<div id="landing-page-container"> 
    <div id="background-container"> 
    <div> 
     <img alt="background" id="background" src="files/background.jpg"> 

    </div> 
    </div> 

</div> 
<div class="container"></div>

और यहां अपने सीएसएस है

html {width: 100%; height: 100%} 
body {width: 100%; height: 100%} 
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1} 
#background-container {width: 100%; height: 100%; position: absolute} 
#background {width: 100%; height: auto; z-index: -100}

और निश्चित रूप से आपको अपनी आपूर्ति करने की आवश्यकता है background.jpg

स्रोत

2011-12-27 20:46:21 iMad

सीएसएस

उत्तर

संबंधित मुद्दे