कैसे दो पृष्ठभूमि छवियों को जोड़ने के लिए - बाएँ और दाएँ केंद्र स्तंभ

Question

से मैं इस सीएसएस है:

#wrapper1 { 
min-width:1020px; 
min-height:100%; 
} 
#wrapper2 { 
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; 
} 
#wrapper3 { 
width:1020px; 
margin:0 auto; 
} 

और इस एचटीएमएल:

<div id="wrapper1"> 
<div id="wrapper2"> 
    <div id="wrapper3" class="clearfix" <!-- content here --> 
     <p>blah blah blah</p> 
    </div> 
</div> 
</div> 

2 छवियों जोड़ने की जरूरत है - बाएँ और दाएँ से सेंटर कॉलम चौड़ाई परिवर्तन के बिना केंद्र कॉलम और छवियों ने पृष्ठ की समग्र चौड़ाई को प्रभावित नहीं किया है। उदाहरण:

मैं छवियों को जोड़ सकते हैं, और बना एक कुछ प्रयास

1. जब मैं ब्राउज़र चौड़ाई बदलने की कोशिश - पृष्ठभूमि छवियों केंद्रीय स्तंभ के अंतर्गत जाना

2. मैंने min-width:1020px; to min-width:1665px; को बदलने की कोशिश की - पहली नज़र में, सब ठीक है, लेकिन स्क्रीन रिज़ॉल्यूशन के लिए - 1665px से कम सभी सामग्री को दाएंपर स्थानांतरित किया गया हैमैं कुछ ही विकल्प की कोशिश की लेकिन असफल

मेरा प्रश्न: сan मैं एक छवि जगह इतनी है कि जब आप ब्राउज़र की चौड़ाई बदल - छोड़ दिया और केंद्र स्तंभ के दाईं ओर दूरी को कम करने (यह डिफ़ॉल्ट है व्यवहार करता है, तो कोई पृष्ठभूमि छवियों)

Here is code with images examples.

अगर मैं 1020px खाली केंद्र भाग के साथ 1 बड़ी छवि बनाने के लिए और इसे में अपने बाएं/सही छवियों डाल .. यह काम करेगा?

Answer 1

आप का अनुसरण कर सकते गुणकों समाधान:

1) का प्रयोग करें divs: [अच्छा]

divs का एक अच्छा "ढांचा" बनाना इतना कर सकता है आपकी समस्या LVE, इस तरह उदाहरण के लिए कुछ:

<div id="allWrapper"> 
<div id="leftSidebar"></div> 
<div id="centerOrContent"></div> 
<div id="rightSidebar"></div> 
</div> 

और सीएसएस (नहीं परीक्षण किया) के एक स्यूडोकोड:

div#allWrapper{ 
width: 100%; 
heigt: 100%; 
} 
div#leftSidebar{ 
min-width: [theWidthOfLeftImage] px; 
height: 100%; 
background-image: url(leftImage.jpg); 
backround-position: center right; 
} 
etc... 

फिर सीएसएस (फ्लोटिंग और आकार) के साथ खेल आप दृश्य समायोजित कर सकते हैं।

2) एकाधिक पृष्ठभूमि का उपयोग करें: http://www.css3.info/preview/multiple-backgrounds/)

div#example1 { 
width: 500px; 
height: 250px; 
background-image: url(oneBackground), url(anotherBackground); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 
} 

3) स्थिर का उपयोग ": [हमेशा अच्छा नहीं]

आप इस सीएसएस स्यूडोकोड गुणकों पृष्ठभूमि (यहां पाया उपयोग करने के लिए उपयोग कर सकते हैं बड़ी "छवि: [आलसी समाधान]

जैसा कि आप सुझाव देते हैं (मध्य में खाली के साथ) एक स्थिर छवि का उपयोग करें, समस्या को हल कर सकते हैं, लेकिन यदि डब्ल्यू ebsite "उत्तरदायी" है, आप अलग-अलग स्क्रीन रिज़ॉल्यूशन (या ब्राउज़र-विंडो का आकार बदलकर) के साथ ग्राफिक समस्याएं प्राप्त कर सकते हैं। इस मामले में आपको केंद्रीय कॉलम की स्थिति और चौड़ाई को भी ठीक करना होगा (विंडो आकार बदलने पर)।

4) उत्तरदायी डिजाइन का उपयोग: [! उत्कृष्ट - यह करना]

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

फिर से, ओवरलैपिंग से बचने के लिए, आप एक "विशेष" उत्तरदायी सीएसएस सेट कर सकते हैं। यह पता लगाता है कि खिड़कियों की चौड़ाई < एक्स है 2 छवियां गायब हो जाती हैं। उत्तरदायी डिजाइन के बारे में वेब पर मिल

@media only screen and (min-width: 481px) { 
//here happens something when the screen size is >= 481px 
div#example { 
    background-image: url(oneBackground); 
} 
} 

@media only screen and (max-width: 481px) { 
//here happens something when the screen size is <= 481px 
div#example { 
    background-image: none; 
} 
} 

ये कुछ लिंक: इस सीएसएस स्यूडोकोड साथ उदाहरण के लिए

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

Answer 2

आप दो पृष्ठभूमि के साथ दो पूर्ण डीआईवी का उपयोग कर सकते हैं। एक बाएं केंद्र और दूसरा एक सही केंद्रित:

साइट पर जहां भी आप चाहते हैं वहां डीआईवी रखें। (वे बिल्कुल तैनात कर रहे हैं)

HTML:

<div class="background" id="background1"></div> 
<div class="background" id="background2"></div> 

सीएसएस:

.background{ 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 

#background1{ 
    background: url(yourImage1.jpg) no-repeat 100% 0; 
} 

#background2{ 
    background: url(yourImage2.jpg) no-repeat 0 0; 
}