html - CSS 背景

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 支持。试试看。

如果您不希望它填满屏幕(我做到了)，显然可以调整定位内容。