Question

我正在学习CSS，我正在网站上使用它来控制网站的布局。

我有多个容器，其中5个，彼此重叠，我有一个页面的背景，但我也想使用其中一个容器的背景。所以我使用'background-image:url("");'标签来使用背景，我也使用了附件，重复。问题是我的图片没有将自己设置为容器，它正在超越我在CSS代码中设置的维度height:312px;和width: 1000px;

这是CSS

html, body 
{
margin-top: 25px;
padding: 0;
background-image:url("../../images/background.png");
background-repeat: none;
background-attachment: fixed;
 }

.hidden 
{
display: none;
}

#page-container 
{
width: 1000px;
margin: auto;
background: transparent;
}

#header 
{
height: 130px;
}

#content-top
{
background: #D9D9D9;
background-image:url("../images/pic.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right top;
height: 312px;
width: 1000px;
 }

这是HTML：

<div id="page-container">

    <div id="header">
        <div id="flashContent">

        </div>
    </div>

    <div id="content-top"><!--<img src="images/pic.png">--></div>

    <div id="portfolio-container">

        <div id="portfolio1"><p>1</p></div>

        <div id="portfolio2">2</div>

        <div id="portfolio3">3</div>

        <div id="portfolio1"><p>4/p></div>

        <div id="portfolio2">5</div>

        <div id="portfolio3">5</div>

    </div>

    <div id="main-content">
        main-content
    </div>

    <div id="footer">Footer</div>

</div>

我没有粘贴所有的CSS，但需要让我知道。

就好像背景填充的空间比指定的空间大得多。

Answer 1

上次我需要做这样的事情时，我做了以下事情：

#background{position:absolute; top:0; left:0; width:100%; max-width:1024; max-height:768; height:auto; z-index:-1; }

然后在我的页面上我收录了以下内容：

<img id="background" src="whatever.jpg" alt="" title="" />

就是这样。这实际上非常有效，背景图像神奇地调整自身大小，直到其中一个尺寸（宽度或高度）达到指定的最大值。

它不需要CSS3支持。试试吧，看看。

如果您不希望它填满屏幕，我很明显会调整定位的东西（我做过）。

Answer 2

您必须将background-size设置为100％

它仅适用于支持CSS3的浏览器

Answer 3

在#contentTop

中尝试float：left

希望有所帮助！

在css中你也有background-size：contains / cover

CSS背景

3 个答案: