CSS：圖像出現在內容區域旁邊（左側和右側）

Question

我目前正在處理圖像和背景css位置。我一直在努力嘗試讓內容區域旁邊（左/右）出現相同的圖像。我試圖讓圖片位置不受頁面大小的影響。

我怎樣才能得到相同的圖片出現在內容區旁邊？ EXAMPLE

這是什麼我的目標爲：

Answer 1

這是my stab at it。我使用了一個位於中心的絕對定位的div來包含圖像，然後使用相對位置來獲取它們到特定的像素位置。訣竅是，如果你不使用相對定位，他們是在另一個之上，所以你必須申請一個top:相當於圖像的高度其中之一，讓它轉移到匹配。

HTML：

<div id="image_container"> 
     <div id="img_r" class="outside_image"> 
      <img /> 
     </div> 
     <div id="img_l" class="outside_image"> 
      <img /> 
     </div> 
    </div> 

CSS：

#image_container{ 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    width: 0px; 
    z-index: 900; /* not really required */ 
} 

.outside_image img{ 
    width: 200px; 
    height: 200px; 
} 
.outside_image { 
    position: relative; 
} 
#img_r{ 
    float: right; 
    right: -725px; 
    top: 200px; 
} 
#img_l{ 
    float: left; 
    left: -725px; 
} 

Answer 2

你可以使用一個負利潤率左上＃LEFT2：

#left2 {  
    float: left;  
    width: 200px;  
    background: #DDD;  
    -moz-border-radius: 10px;  
    border-radius: 10px;  
    margin-right: 15px; 
    padding: 5px;  
    margin-left: -248px;  
} 

如果你需要它留在同一個地方你（即使你調整頁面大小）你可以使用絕對位置：

#left2 { 
    position: absolute;  
    left: 20px; 
    top: 160px; 
} 

我使用Chrome開發人員工具來嘗試這個東西了順便說一句。以下是我的代碼頁面的屏幕截圖： http://d.pr/i/wXQ2