我有一个名为myImage.jpg的图像.这是我的CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
Run Code Online (Sandbox Code Playgroud)
出于某种原因,当我这样做时,myImage的宽度会延伸到整个屏幕,但高度只会延伸到页面上其他所有内容的高度.所以,如果我把一堆
<br>
Run Code Online (Sandbox Code Playgroud)
在我的html页面中,然后高度将增加.如果我的HTML页面只包含一个
<div id='header'>
<br>
</div>
Run Code Online (Sandbox Code Playgroud)
那么背景图像的高度就是一个高度
<br>
Run Code Online (Sandbox Code Playgroud)
如何将背景图像的高度设置为用户用于查看网页的屏幕的100%?
我正在尝试使用背景图像设置一系列div,每个div都有自己的固定高度,并且拉伸以填充宽度,即使顶部/底部有被剪裁的溢出.我只是不想要边缘的白色空间.
目前,我有:http://jsfiddle.net/ndKWN/
CSS
#main-container {
float:left;
width:100%;
margin:0;
padding:0;
text-align: center;
}
.chapter{
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1{
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
#chapter2{
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
Run Code Online (Sandbox Code Playgroud)