Question

I have plans to create carousel with a background that spans the width of the browser. To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.

我遇到一个问题, 试图将背景图像添加到覆盖浏览器宽度的 < code> div 上。当我使用 < code> beackbround- repetate: repeat- x; 时, 它仍然只是浏览器最左侧的550x1 px 服务。不再重复。我认为这是100%宽度造成的。如果我让宽度达到100%, 我遇到了内部 < code> div 的问题, 则取决于所使用监视器的分辨率, 它会被迫向右或向左移动。我不想发生这种情况。

有谁知道我可以达到/模拟100%宽度, 并仍然使用 地底重复: repeat-x; 的方法吗?

EDIT, 我使用 2 divs 因为我正在施用银光, 并且想把它放在屏幕上。这是我的代码, 它可能会使我在做的东西更加紧紧。如果你仍然相信 1 div 是比 2 更好, 告诉我这是错的, 但这里是代码。它非常简单, 因为很多事情会用银光做, 或者至少我认为它会有些简单, 但事情会是这样的。

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

You don t have to take two div s to achieve what you want. Just take your background image in the body like

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

and give your div certain width and give it a style like

div#yourID{margin:auto}

这会为你工作,很好。

Answer 2

你只需要一个迪夫, 在中间你想要的那个。

<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” rel=“nofollow'>http://dabblet.com/gist/2774626上看到现场直播。

Answer 3

尝试此 :

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

Answer 4

解决了! 问题是, 我并没有将图像 < code> carousel_bar_ 01. png 放在正确的位置。

友情链接