<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. cocos2d-x 保持屏幕点亮及自动变灰

    很早之前遇到的问题,现在记录一下.有一家Android渠道(抱歉,时间太长了已经记不大清楚是哪一家了 oppo/联想/酷派?)在我们提交新版本时拒绝了,理由是:手机背光状态下,屏幕不会自动变灰. 这里 ...

  2. Flash对象插入到网页中的3px问题

    我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题.最后发现是样式导致的- 公司里有很多网页游戏,之前是项目多,抄来抄去,JS ...

  3. [Web 前端 ] Jquery attr()方法 获取或修改 对象的属性值

    cp from : https://blog.csdn.net/gf771115/article/details/18086707 jquery中用attr()方法来获取和设置元素属性,attr是at ...

  4. [Android Security] Smali和逆向分析

    copy : https://blog.csdn.net/u012573920/article/details/44034397 1.Smali简介 Smali是Dalvik的寄存器语言,它与Java ...

  5. .NET零基础入门06：面向对象入门

    一:前言 在本系列课程的第一部分,我们说明为了要选择C#作为你成为程序员的第一门语言: • 首先,C#是一门非常优秀的面向对象编程的语言: 凡是对编码感兴趣的同学一定听说过"面向对象编程&q ...

  6. Java命令学习系列（七）——javap

    javap是jdk自带的一个工具,可以对代码反编译,也可以查看java编译器生成的字节码. 一般情况下,很少有人使用javap对class文件进行反编译,因为有很多成熟的反编译工具可以使用,比如jad ...

  7. 2.2 dubbo-spi源码解析

    package com.alibaba.dubbo.demo.test; import com.alibaba.dubbo.common.extension.ExtensionLoader; impo ...

  8. 在Linux中查看正在运行哪些process，杀掉一批名字相同的process

    列出全部进程: ps -A 杀掉所有名为netmist的进程 killall netmist 参考资料 ============ https://www.howtogeek.com/107217/ho ...

  9. canvas移动端常用技巧图片loading

    核心知识点:drawImage 作用:将图片加载在canvas html: <canvas id="myCanvas" width="200" heigh ...

  10. 大数据开发实战：Hive优化实战2-大表join小表优化

    4.大表join小表优化 和join相关的优化主要分为mapjoin可以解决的优化(即大表join小表)和mapjoin无法解决的优化(即大表join大表),前者相对容易解决,后者较难,比较麻烦. 首 ...