IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="chaozhang5">
    <meta name="mail" content="[email protected]">
    <meta name="time" content="2015.08.03 10:28am">
    <title>亳州市药博会后台登陆</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="bg">
        <img src="img/pic-loginbg.jpg">
    </div>
</body>
</html>
body
,html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 400px;
    z-index: -1;
}
.bg img {
    width: 100%;
    height: 100%;
}

方法二:参考 http://www.dowebok.com/demo/139/,可兼容到IE7.

时间: 2024-10-13 04:02:36

IE9以下通过css让html页面背景图片铺满整个屏幕的相关文章

背景图片铺满屏幕-------Day85

你有没有遇到过一种情况,你特别喜欢一张图片,可是可惜的是这张图片就小了那么一丁点.但有小片留白啊,那就不好看了啊.你有没有过呢,我不知道,但我真的就碰到了.我特喜欢那张图,就想让它做背景,可就小了点.于是我就想办法了. background-size:cover: background-size:contain. 两个看起来几乎相同,实际原理还真不一样: cover.翻译过来就是"覆盖",这是纯正的背景铺满了元素,它会比較图片的长和宽.哪一个比較小,它就以哪一个为基准进行扩大.图片的本

背景图片铺满body

添加背景图片: 添加样式代码如下: <style type="text/css"> body { background: url("image/bg.jpg") top center no-repeat; background-size: cover; } </style> 最终效果如下图所示:

手机端背景图片撑满整个屏幕

HTML设置一个空div,用来放置背景图片. <body> <div class="main"></div> </body> (1)方法一:高度100% html,body{ margin:0; height:100%; } .main{ height:100%; background:url('./bg.png') no-repeat ; } (2)方法二:高度100vh .main{ height:100vh; width:100vw

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

2014年辛星解读CSS第八节 使用背景图片

这应该是系统CSS的教程的最后一节了,为什么呢,因为到这一节,我感觉基础知识就已经讲完了,接下来的就是无穷的实战,而实战是很难用知识去讲出来的,靠的是积累,拼的是经验,这些都不是讲出来的. 好,我们下面来说一下用CSS添加背景图片的方式把,它在background属性中指定,可以用url("图片路径")的方式来指定背景图片,如果是repeat,则图片在横向和纵向上平铺,如果是no-repeat,则背景图像不会平铺,只显示一次,如果是repeat-x,那么就在水平方向平铺,如果是repe

jquery后台登录页面背景图片自动轮换登录界面代码

在别的网站上看到的比较炫酷的Web登陆界面,背景图片可以自动轮换.介绍给大家,有兴趣的可以下来改改当做自己系统的登陆界面. 如图: 点击下载源代码 jquery后台登录页面背景图片自动轮换登录界面代码

css background-size与背景图片填满div

background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有三种属性,分别为 background-size: cover MDN文档解释说明:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见.A keyword that is the inverse of contain. Scales the image as large as possible a

页面内容不足以铺满屏幕高度时,footer居底显示

在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,footer下面就会有白块剩余. 现在要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕.而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示: 方法一: html [html] view plain copy <div class="page"> 主要页面 </div> <footer>底部</foo