Question

我是HTML / CSS新手。

我正在构建一个简单的网页，但每当我最小化窗口时，背景颜色随之最小化。所以当我向右滚动时，背景是空白的。

HTML：

＆＃13;

    #body{
	    width:100%;
	    overflow:scroll;
	    /*overflow-x:scroll;*/
	    /*position:relative;*/
    }

    .container {
	    padding:20px 70px;
	    width:1000px;
	    position:absolute;
    }

    div.top {
	    background-color: #6495ed;
	    width:100%;
	    height:400px;
	    margin:0;
    }

    div.top_text {
	    padding:25px;
	    margin:35px;
	    float:left;
	    display:inline-block;
	    width:550px;
    }

    div.top_form {
	    border : 2px solid;
	    border-radius:20px;
	    padding:15px;
	    /*float:left;*/
	    display:inline-block;
	    width:auto;
	    background-color:#00edca;
    }

＆＃13;

 <body id="body">
	 <div class="top" align="center">
	  <div class="container" align="center">
		<div class="top_text">
			<p id="intro">The Best <b>Pest Control Services</b></p>
		</div>
		<div class="top_form">
                <!--some content-->
        </div>
      </div>
     </div>
    </body>

＆＃13;

感谢您的帮助!!

Answer 1

HTML

html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

Answer 2

body{
  margin: 0;
  padding: 0;
}

.container { 
  padding: 20px 70px;
  width: 1000px;
  margin: 0 auto;
}

div.top {
  background-color: #6495ed;
  width: 1000px;
  height: 400px;
  margin: 0 auto;
}
div.top_text {
  padding: 25px;
  margin: 35px;
  float :left;
  display: inline-block;
  width: 550px;
}

Answer 3

background-size: cover（或background-size: 100% 100%）可用于身体或其他元素，以使背景图像或颜色覆盖整个元素。

MDN example

如果您不希望在更改窗口大小时更改元素的大小，请不要使用％大小，而是使用固定的单位大小。

当最小化窗口时，背景最小化

3 个答案:

HTML