Question

我计划创建一个跨越浏览器宽度的背景旋转木马。为此，我在正文中设置了margin:0; padding:0;，并将我的div设置为width:100%。我之所以选择它是因为它包含另一个div，它有一个左边距和右边距：auto;将第二个div置于浏览器的div范围内。

我在尝试将背景图片添加到跨越浏览器宽度的div时遇到了问题。当我使用background-repeat:repeat-x;时，它仍然只是浏览器最左侧的550x1 px条子。它不重复。我认为这是由于100％的宽度。如果我放开100％宽度，我会遇到内部div被迫向右或向左的问题，具体取决于所使用的显示器的分辨率。我不希望这种情况发生。

有没有人知道我可以实现的方式/模拟100％宽度并仍然使用background-repeat:repeat-x;？

编辑，我使用2个div，因为我正在使用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;
}

Answer 1

你不需要花两个div来达到你想要的效果。只需将您的背景图像放在身体中，如

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

并给你的div 一定的宽度，并给它一个像

的样式

div#yourID{margin:auto}

这对你很有用。

Answer 2

试试这个：

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

Answer 3

你只需要一个div，即你想要的那个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

看到它

Answer 4

解决！问题是我没有为图像carousel_bar_01.png放置正确的位置。

100％宽度，背景重复

4 个答案: