100％寬度與背景重複

-1

我有計劃創建具有跨越瀏覽器寬度的背景的傳送帶。爲此，我在身體中設置了margin:0; padding:0;，並將橫跨背景的div設置爲width:100%。我選擇了這個，因爲它包含另一個div，它有左和右邊距：auto;使第二個div集中在跨越瀏覽器的div內。100％寬度與背景重複

我遇到了一個問題，試圖將背景圖片添加到橫跨瀏覽器寬度的div。當我使用background-repeat:repeat-x;時，它仍然是瀏覽器最左側的550x1像素條子。它不重複。我認爲這是由於100％的寬度。如果我放開100％寬度，則會遇到內部div被迫向右或向左移動的問題，具體取決於正在使用的顯示器的分辨率。我不希望發生這種情況。

有誰知道一種方法我可以實現/模擬100％的寬度，仍然使用background-repeat:repeat-x;？

編輯，我使用2個divs，因爲我正在申請silverlight，並且希望將它放在屏幕上進行藝術處理。這裏是我的代碼，它可能會讓我更接近我在做什麼。如果你仍然相信1 div比2好，那麼告訴我那是我的錯，但是這裏是代碼。這很簡單，因爲Silverlight中會做很多事情，或者至少我認爲這會有點簡單，但事情就是這樣。

HTML 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Home</title> 
    <link href="styles/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id=NavContainer> 
<div id="Navigation"> 
    <img src="img_data/dem_Logo.png" id="Logo"/> 
</div> 

</div> 
<div id="Carousel"> 
<div id="SilverlightContainer"> 

</div> 
</div> 

</body> 
</html> 








CSS 
body 
{ 
    margin:0; 
    padding:0; 
    background-color:#000061; 
} 

#NavContainer 
{ 
    width:900px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#Navigation 
{ 
    height:75px; 
    width:100%; 
} 

#Logo 
{ 
    float:left; 
} 

#Carousel 
{ 
    height:550px; 
    width:100%; 
    background-image:url('img_data/carousel_bar_01.png'); 
    background-repeat:repeat-x; 
} 

#SilverlightContainer 
{ 
    height:550px; 
    width:900px; 
    margin-left:auto; 
    margin-right:auto; 
}

來源

2012-05-23 user764323

這有點難以想象。如果你在這裏發佈你的代碼會更好 –

你的問題有點難以閱讀，並且可能會使用一些示例代碼來代替目前代碼塊中的代碼。如果您編輯問題，輸入區域上方還會有一個標題，並帶有一些幫助圖標（另外：您可以在輸入框下方預覽對答案的更改）。 – Jeroen

請在這裏發佈您的代碼.... –

你不需要用兩個div來實現你想要的。只要看看你的背景圖像中的身體像

body{ background:url(image path here) repeat-x}

，讓您的DIV 一定的寬度，並給它像

div#yourID{margin:auto}

風格這會爲你就好了工作。

來源

2012-05-23 06:17:11

試試這個：

body { 
width:100%; 
height:100%; 
background:url(your-image.jpg) repeat-x; 
position:absolute; 
}

來源

2012-05-23 10:59:55

您只需只有一個DIV，你在中間想要的。

<div class="centered"></div>

你設置的背景對身體：

body { 
    min-height: 550px; 
    background: url(path/image.png) repeat-x; 
    background-size: 1px 550px; 
}

然後，你還要居中的div：

.centered { 
    min-height: 150px; /* whatever values you wish for height and width */ 
    width: 300px; 
    margin: 75px auto; /* whatever values you wish for top/ bottom margin */ 
}

您可以在http://dabblet.com/gist/2774626

來源

2012-05-23 11:20:58 Ana

解決現場看看吧！問題是我沒有把圖像放在正確的位置carousel_bar_01.png。

來源

2012-05-24 00:24:31 user764323

100％寬度與背景重複

回答

相關問題