背景寬度爲100％的圖像中心位置固定

首先，我要感謝所有這一次您所有的答案。作爲學生，我通過網站從項目中找到了很多解決方案以及工作。背景寬度爲100％的圖像中心位置固定

在問這個問題之前，我搜索了很多，但是我找不到一個可行的解決方案。

對不起，標題。想不到更好的一個。

我嘗試開發一個站點，並且遇到標題問題。主頁面容器的修正大小爲1024px，內部內容限制爲960px。只有標題和頁腳佔據了整個窗口的大小。

我有兩個圖像：第一個是2000x250（後面的建築），第二個是2000x58（帶房子的語言）。我們分別命名爲img_A和img_B。我希望他們兩個都根據用戶的分辨率（如頁腳）來拍攝整個屏幕，但是也要根據高度進行縮放。

問題是我不管屏幕分辨率是什麼，img_B都在1024px內居中，所以ES按鈕將會在主頁面的末端（1024px），因此以margin 0爲中心的標誌會自動;不要蓋房子。

這裏有一些圖像來說明我所問的更好。

錯誤（1920×1200）：

http://imageshack.us/photo/my-images/577/headerwrong.jpg/

權（1680×1050）：

http://imageshack.us/photo/my-images/20/headercorrect.jpg/

這裏是我的CSS代碼：

#header{ 
    height: 140px; 
    width: 100%; 
    background: url(images/background_home.jpg) center center no-repeat; 
} 

#header .language_banner{ 
    background: transparent url(images/header_en.png) right bottom no-repeat; 
} 

#header .logo{ 
    display:block; 
    width:242px; 
    margin:0 auto; 
    padding-top: 63px; 
}

和html代碼：

<div id="header"> 
    <div class="language_banner"> 
     <div class="logo"> 
      <img alt="athens insiders" src="<?php bloginfo("template_directory"); ?>/images/logo.png"> 
     </div> 
    </div> 
</div>

在此先感謝

來源

2013-02-16 Laxmana

我不太明白你想達到什麼樣的，但我認爲你想嘗試尋找（並加入！）的背景大小的CSS（和也許是後臺剪輯）屬性到你的#header（或任何地方），在你定義了背景之後。

請注意，在早期版本的IE中不存在支持，因此如果要實現通用兼容性，則可能需要其他解決方法。

來源

2013-02-16 17:43:32 Ben

謝謝！對於我用英語解釋我想說什麼有點困難。背景位置：使用img_A背景圖片可以很好地工作。但是我有與img_B相同的問題。無論分辨率如何，我都無法將它放在同一個地方。取決於分辨率，圖像從不同點開始並以不同的方式結束。我總是希望圖像上的ES鏈接位於資源管理器自動對齊的內容頁面的末尾。也許這可以更好地說明：http://imageshack.us/photo/my-images/593/headerwrong2.jpg/。謝謝我的英語。 – Laxmana 2013-02-16 18:53:46

你有沒有想過創建房屋和語言作爲絕對定位的元素，並把它們放在你喜歡/需要的地方放在其他背景中？讓我覺得是一種更簡單的方法來更好地控制你想要做的事情...... – Ben 2013-02-18 16:36:34

感謝您的幫助！看到這個網站：http：//athensinsiders.com/。這個人做了我想要的一個背景圖像。我也想要。如果重新調整窗口大小，每次重新調整窗口大小時都會看到背景位於相同的位置。我嘗試了基於他的代碼，但我無法做到。關於創建單獨圖像的好主意。 – Laxmana 2013-02-18 21:24:46

背景寬度爲100％的圖像中心位置固定

回答

相關問題