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

顯然，如果您不希望定位內容填滿整個屏幕，我會對其進行調整。

Answer 2

您必須將background-size設置為100％

它僅在支持CSS3的瀏覽器中起作用

Answer 3

嘗試float：left在#contentTop中

希望有幫助！

在CSS中，您還具有background-size：contain / cover