如何添加兩個背景圖像 - 左右從中心柱

Question

我有這樣的CSS：

#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.

如果我讓1個1020px鑄坯中心部分大的圖像，並把我的左/右圖像進去..可以嗎？

Answer 1

您可以按照倍數解決方案：

1）使用的div：[好]

創建一個好的div框架可以這樣綠萼您的問題，比如像這樣：

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

和CSS（未測試）的僞代碼：

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

然後用CSS（浮動和大小）玩，你可以調整視圖。

2）使用多重背景：不總是好]

你可以使用這個CSS僞代碼使用倍數的背景（在這裏找到：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）使用靜態「大「的形象：[懶惰的解決方案]

使用你建議的靜態圖像（中間空白）也可以解決問題，但如果w ebsite是「響應式」的，您可以使用不同屏幕分辨率的圖形問題（或調整瀏覽器窗口大小）。 在這種情況下，您還必須修正中央列的位置和寬度（在窗口大小調整時）。

4）使用響應式設計：[！極好 - 這樣做]

爲了避免圖像的中心（內容）的div重疊，你可以設置爲背景色（這個div的）如白色。

同樣，爲了避免重疊，您可以設置一個「特殊」響應CSS。檢測窗口是否有寬度< X 2個圖像消失。比如這個CSS僞代碼：

@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

您可以使用兩個背景的絕對DIV。一個左中心，另一個右中心：

將DIV放置在站點所需的任何位置。 （它們是絕對定位）

HTML：

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

CSS：

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