<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. 修复android下webView控件的总结

    游戏中有一个收集玩家问题反馈的网页,很早之前就有同事反映说android在游戏无法上传附件,在浏览器中是可以正常使用的.最近能腾出手来的时候,就仔细看了一下这个问题,发现很里藏着不少问题,这里一一记录 ...

  2. 让Android SDK Manager正常更新的办法

    首先,进入C:\Windows\System32\drivers\etc,找到hosts文件,用记事本打开它. 在文件的最后加入: 203.208.46.146 dl.google.com 203.2 ...

  3. Java 8函数式接口functional interface的秘密

    Java 8函数式接口functional interface的秘密 2014年10月29日 17:52:55 西瓜可乐520 阅读数:3729   目录 [−] JDK 8之前已有的函数式接口 新定 ...

  4. FastJson、Jackson、Gson进行Java对象转换Json的细节处理

    前言 Java对象在转json的时候,如果对象里面有属性值为null的话,那么在json序列化的时候要不要序列出来呢?对比以下json转换方式 一.fastJson 1.fastJson在转换java ...

  5. git clone报错：“server certificate verification failed. CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none”

    I can push by clone project using ssh, but it doesn't work when I clone project with https. it shows ...

  6. 布拉格捷克理工大学研究团队：Prisma进化版

    原文链接  还记得 Prisma 吗?就是能把拍摄的照片转化为各种名画风格的修图软件,神经网络的深度学习后,想要波普还是梵高风的图片都不在话下. 现在,它的进化版本来了.这回是布拉格捷克理工大学的研究 ...

  7. B/S架构中常用弹出方法 (转）

    <一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含 ...

  8. Linux中如何查看文件夹的大小

    直接查看当前文件夹的大小: du –sh 只看文件夹的名字里包含某字符串的子文件夹的大小: du –h –d 1 | grep "BACKEND" 我的linux系统被阉割的比较厉 ...

  9. .NET程序性能优化的基本要领

    Bill Chiles(Roslyn编译器的程序经理)写了一篇文章<Essential Performance Facts and .NET Framework Tips>,知名博主寒江独 ...

  10. 文字编码和Unicode

    文字编码和Unicode 说明文字: https://blog.csdn.net/fengzhishang2019/article/details/7859064 Java 程序: https://w ...