自动扩展背景图像
[英]Automatically Extending a Background Image
问题描述
我正在尝试使用图像作为背景。 页面内容的高度为800px。 因此，在较高的屏幕上，您应该能够在内容之后看到大块的背景图像，而在较短的屏幕上，它可能恰好适合，因此内容恰好在屏幕底部结束，而下方几乎没有背景图像。
我希望背景图像自动扩展，因此无论屏幕大小如何，它都将填满整个屏幕。 我尝试了几件事，例如将img.extfullbackground的高度设置为auto，但随后滚动区域的方式大大降低了（例如3000px），而100％仅达到内容的大小。
有谁知道我如何使背景图像自动扩展到屏幕尺寸？
这是我的HTML的代码段：
</head>
<body class="extfullbackground">
<img class="extfullbackground" src=".\background.png" alt="background" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src=".\pf_logo.png" alt="PF Logo"/>
</div>
<div class="topmiddle">
<h1 class="title">PF is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1220px; height:600px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:blue;">
<div class="extcontentcontainer">
<h2 class="subtitle">Please be patient while we update PF.</h2>
<p class="pad10 line10">
这是我的CSS ：（注意：我使用了CSS重置脚本）
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
}
.extcontentcontainer {
width:820px;
height:600px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
background-color:red;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:auto; /* alternative: bottom:0; */
padding-left:0px;
padding-right:0px;
margin-left:0px;
margin-right:0px;
}
2 个解决方案
解决方案1
1 已采纳 2013-06-03 14:02:45
body {
background: url('background.png');
background-size: cover;
}
这在IE8上对我有用。 （这是我的iMac上的模拟器）
否则：为什么不将图像高度设置为100％，而宽度则没有设置。 图片应保持比例不变，并应覆盖浏览器的整个高度。
解决方案2
0 2013-06-03 13:39:05
您应该尝试使用此（html）：
<img src="bg.jpg" class="bg" alt="achtergrond">
CSS：
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-999;
pointer-events: none;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
pointer-events: none;
}
}
当屏幕宽度大于1024时，这会将背景拉伸到填充屏幕，而当屏幕小于1024时，则将背景保持为1024 px。
背景图像没有延伸到窗口的底部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.