<body style="overflow:hidden;">

    <div class="wrapper">

        <!--背景图片-->

        <div id="web_bg" style="background-image: url(/images/welcome.png);background-size:100% 100%"></div>

        <!--其他代码 ... -->

    </div>

</body>

</html>

<style>

    #web_bg {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: -10;

        zoom: 1;

        background-color: #fff;

        background-repeat: no-repeat;

        background-size: cover;

        -webkit-background-size: cover;

        -o-background-size: cover;

        background-position: center 0;

    }

</style>

背景图片自适应整个页面CSS+DIV的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  3. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  4. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  5. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  6. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

  7. 笔记-CSS空背景图片会导致页面被加载两次

    如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (Chrome.56.0.2924.87 测试) 因为:空图片路径属性值,默认加载当前页面的URL作为图片路径 Safar ...

  8. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  9. div背景图片自适应

    对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...

随机推荐

  1. [Network] okhttp3与旧版本okhttp的区别分析

    cp from : https://www.jianshu.com/p/4a8c94b239b4 1.包名改变 包名改了由之前的 com.squareup.http.改为 okhttp3. 我们需要将 ...

  2. Orchard模块开发全接触5：深度改造前台第二部分

    在这一部分,我们继续完善我们的购物车,我们要做以下一些事情: 1:完成 shoppingcart.cshtml: 2:让用户可以更新数量及从购物车删除商品: 3:创建一个 widget,在上面可以看到 ...

  3. java HttpServletRequest和HttpServletResponse詳解

    這篇文章主要介紹瞭java HttpServletRequest和HttpServletResponse詳解的相關資料,需要的朋友可以參考下 java HttpServletRequest和HttpS ...

  4. Could not install packages due to an Environment Error: [Errno 13] Permission denied 解决方案

    执行pip install 报错如下: Could not install packages due to an Environment Error: [Errno 13] Permission de ...

  5. 联想昭阳（Lenovo）

    1996年,联想®昭阳系列推出了第一台笔记本电脑S5100.在经历了十几年的发展之后,联想昭阳系列也成为了国内市场占有率最高的国产商用笔记本品牌之一.昭阳品牌对于联想意义非凡,不仅仅是因为首款联想笔记 ...

  6. [转]php-mobile-detect

    转自:http://www.oschina.net/p/php-mobile-detect php-mobile-detect (Mobile_Detect) 是一个 PHP 类,用来通过 User- ...

  7. 用SLF4j/Logback打印日志-2

    本篇主要介绍logback的输出源配置,logback默认提供了很多输出源,但是用的最多的是这几种: OutputStreamAppender 日志输出到一个二进制流,可以通过 <encoder ...

  8. [置顶] 不刷机让越狱后的iphone恢复出厂设置

    iphone越狱后,设置里的清除所有内容和设置选项是不生效的,选上之后菊花转个不停,只能强制退出,还有白苹果的危险. 若想恢复出厂设置有两个办法: 一.刷机 最直接的办法,我觉得itunes配合ito ...

  9. lftp命令

    lftp 是一个功能强大的下载工具,它支持访问文件的协议: ftp, ftps, http, https, hftp, fish.(其中ftps和https需要在编译的时候包含openssl库).ll ...

  10. ajax file upload 修改

    先前 写过 JS 判断上传 文件 大小 后来发现一个问题, 就是单页面运行 js 没有问题, 但是基础呢个到项目中 有些时候 obj_img.dynsrc = file.value; 报错说没有 权限 ...