全屏在頁面的某些部分的背景

-1

我想在整個頁面的75％上做一個背景。我不想要身體的背景，因爲在設計中左手邊有一個純色區域。全屏在頁面的某些部分的背景

如果我把背景的主容器，那麼它是不是從右側全屏。

完成此任務的任何線索？我正在使用引導程序

解決方案：應重新計算bg的位置。

$(document).ready(function() { 

function recenter(){ 
    $pos = $('.container').offset().left; 
    $loc = $pos+300; 

    $('body').css('background-position-x', $loc + "px"); 
} 
recenter(); 
$(window).resize(function(){ recenter(); }); 
});

來源

2015-06-11 brainHax

問題尋求幫助調試（「爲什麼不是這個代碼的工作？」）必須包括所期望的行爲，一個特定的問題或錯誤的和必要的重現它最短的代碼**在問題本身**。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

您是否嘗試過包裝右側元素，然後爲包裝提供背景？我認爲它會起作用。 – Mustaghees

右側元素仍然會留在容器中，這是9列，左側（導航）是3列。我需要12列（容器）中的區域的BG。以覆蓋右側的全屏 – brainHax

-1

嘗試使用background-position屬性。要使其適用於每個設備，請爲每個引導程序斷點使用媒體查詢和重置位置。

body { 
    background-position: 100px 0; 
    background-image: url(http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
@media (min-width: 768px) { 
    body { 
     background-position: 200px 0; 
    } 
} 
@media (min-width: 992px) { 
    body { 
     background-position: 150px 0; 
    } 
} 
@media (min-width: 1200px) { 
    body { 
     background-position: 100px 0; 
    } 
}

來源

2015-06-11 08:55:27 yuyokk

是的，我嘗試過，它不適用於不同的屏幕。這是什麼發生在瀏覽器重新大小 http://take.ms/nEuAo – brainHax

看到我的答案更新。我認爲這應該對你有所幫助。 – yuyokk

媒體查詢1200px在我的桌面上工作正常，但是當我在筆記本電腦上查看html時，它看起來像這樣。（在我的筆記本電腦上使用1200px媒體查詢） http://take.ms/nFFph – brainHax

全屏在頁面的某些部分的背景

回答

相關問題