1. 利用div的层次,设置底层div充满屏幕,并给div设置背景图

<div id="Layer1" style="position:absolute;top:0;width:100%; height:100%; z-index:-1">
  <img src="resources/um/img/um_bg_1.jpg" height="100%" width="100%"/>
</div>


2. 利用body元素

body{background:url no-repeate center position red ; background-size:cover};

body{background:url no-repeate center position red ; background-size:contain};

background-size:cover    背景图片充满整个容器,不考虑是否看到完整图片

background-size:contain  背景图片充满整个容器,并出现完整图片

background-size:200px 100px;  数值表示方式

background-size:30% 60%;  百分比表示方式

background-size:auto;    以图片自身大小来填充元素,即auto值


3. js 获取屏幕宽高,设置img 宽高


4. 使用滤镜

body{ 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale');
  background-repeat: no-repeat; 
  background-positon: 100%, 100%; 
}


5. 图片自动适应浏览器大小  - 待验证

img.source-image {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}


http://liyunpeng.iteye.com/blog/2101956


【CSS】整屏大背景的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 原生css实现fullPage的整屏滚动贴合

    目录 1,前言 2,效果展示 3,属性说明 3.1 scroll-snap-type 3.2,scroll-snap-align 4,实际使用 4.1,兼容性 1,前言 今天摸鱼的时候,发现一个很有意 ...

  3. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  4. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  5. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  6. fullPage教程 -- 整屏滚动效果插件 fullpage详解

    1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...

  7. jquery实现整屏翻屏效果:jquery.mousewheel(一)

    实现整屏上下翻效果:需加载的js <script type="text/javascript" src="js/jquery-1.8.3.min.js"& ...

  8. css 关于两栏布局,左边固定,右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

随机推荐

  1. 关于Dubbo分布式服务

    这篇文章写的详细,可参考 http://shiyanjun.cn/archives/1075.html

  2. Chapter 7:Statistical-Model-Based Methods

    作者:桂. 时间:2017-05-25  10:14:21 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 书中 ...

  3. 解决jmeter请求不成功或者报403错误

    有同学遇到这种情况,jmeter请求一个网站,各项参数填写正确,可是响应是403,同样的请求放在浏览器执行就没有问题: 这是因为被请求的网站做了请求来源过滤,来源不明的请求拒绝访问,我们需要在jmet ...

  4. 浅论ajax跨域!从一个例子开始!

    //所谓跨域,简单来说就是去访问不是自己域名下的数据 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. spring boot 入门操作(二)

    spring boot入门操作 使用FastJson解析json数据 pom dependencies里添加fastjson依赖 <dependency> <groupId>c ...

  6. 不小心用js重做了一遍贪吃蛇

    贪吃蛇游戏想必没人会感到陌生,这个游戏的js版本在网上也是一搜一大把,今天我要介绍的仍然是如何用js做一个贪吃蛇游戏,但在关键一步,蛇的运动的实现上略有不同. 贪吃蛇的js版本通常用连续的方块元素来实 ...

  7. 我的学习之路_第二十一章_JDBC连接池

    JDBC连接池和DButils [DBCP连接池工具类] 使用读取配置文件的方式 DBCP中有一个工厂类 BasicDataSourceFactory 工厂类中有一个静态方法 返回值为: DataSo ...

  8. 7.modifier插件的自定义和使用

    1.在plugins下面创建一个文件 modifier.changeDate.php 编写: <?php function smarty_modifier_changeDate($utime,$ ...

  9. 配置SSH无秘钥登录

    [hadoop@hadoop01 ~]$ cd .ssh [hadoop@hadoop01 .ssh]$ ls authorized_keys id_rsa id_rsa.pub known_host ...

  10. rails 多态

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Monaco; color: #f4f4f4; background-color: rgba( ...