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％宽度与背景重复

回答

相关问题