CSS背景圖像跨度僅960px

我在這裏有這個CSS樣式，但它橫跨整個屏幕，而不是在身體的960px寬度內重複它。CSS背景圖像跨度僅960px

body 
{ 
    width:960px; 
    margin: 10px auto 10px auto; 
    background-image:url(logo.png),url(backgroundimage.jpg); 
    background-position: top center, top center; 
    background-repeat: no-repeat, repeat-x; 
    background-attachment: static; 
}

logo.png僅僅是一個公司標誌的圖像，而backgroundimage.jpg是我想只在960像素，而不是在整個頁面跨越。我怎樣才能做到這一點？

來源

2017-04-18 Shiki

'background-size：100％auto' – Slime

附註：我不認爲'background-repeat'採用逗號分隔的速記，但我可能是錯的。因爲可能的值（'repeat-x'，'repeat-y'，'repeat'和'no-repeat'）已經指定了它應該沿着一個軸重複，兩者還是都不重複，所以我不太確定這個簡寫的目的是什麼？ – Santi

個人而言，我強烈建議不要在身上設置寬度 - 在身體內部創建一個div，並將該寬度設置爲960像素。雖然你可以直接在身上設置樣式，但我不認爲在這裏設置寬度是可取的。 – Toby

您將需要創建一個容器類。這個類將包含所有內部div類和內容。

該代碼，這將是如下：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 

    <style> 
    .container{ 
    width: 960px; 
    background: url("logo.jpg"); 
    height: 700px; 
    } 
    </style> 

    <body> 
    <div class="container"> 

    </div> 
    </body> 
</html>

更簡單的方法來做到這一點是使用自舉。 Bootstrap框架提供了一個預製的自定義響應功能的.container類。

來源

2017-04-18 20:18:53

嗯完美，這工作出我需要它，謝謝！ – Shiki

CSS背景圖像跨度僅960px

回答

相關問題