<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. 得到view坐标的各种方法

    这篇文章讲的方法全是再控件可以获取焦点的情况下执行的,如果在oncreat()里面执行,那么得到的都是0 1.getLocationInWindow 这个方法得到的是view相对于当前Activity ...

  2. C# byte[]和文件FileStream相互转化

    , pReadByte.Length);             }            catch            {                return false;        ...

  3. 内核态(Kernel Mode)与用户态(User Mode)

    内核态: CPU可以访问内存所有数据, 包括外围设备, 例如硬盘, 网卡. CPU也可以将自己从一个程序切换到另一个程序 用户态: 只能受限的访问内存, 且不允许访问外围设备. 占用CPU的能力被剥夺 ...

  4. oracle 索引的（创建、简介、技巧、怎样查看）

    一.索引简介1.索引相当于目录2.索引是通过一组排序后的索引键来取代默认的全表扫描检索方式,从而提高检索效率.3.索引的创建要适度,多了会影响增删改的效率,少了会影响查询的效率,索引最好创建在取值分散 ...

  5. SCRIPT5009: “Sys”未定义 部署.net ajax 解决方案

    今天在部署asp.net ajax 的时候发现部署服务器的时候,ajax刷新不正确,开始以为是System.Web.Extensions没有引用到本地,baidu一圈发现(最近google上不了郁闷~ ...

  6. [leetcode]N-Queens @ Python

    原题地址:https://oj.leetcode.com/problems/n-queens/ 题意:经典的N皇后问题. 解题思路:这类型问题统称为递归回溯问题,也可以叫做对决策树的深度优先搜索(df ...

  7. Twitter雪花算法 SnowFlake算法 的java实现

    概述 SnowFlake算法是Twitter设计的一个可以在分布式系统中生成唯一的ID的算法,它可以满足Twitter每秒上万条消息ID分配的请求,这些消息ID是唯一的且有大致的递增顺序. 原理 Sn ...

  8. Octave环境的安装

    Octave是一种解释类的编程语言,并且是GNU项目下的开源软件,与之相对是大家都非常熟悉的matlab,Octave和matlab语法基本上一致,都是用来快速做一些强大的矩阵运算来使用的,最大的不同 ...

  9. Android教材 | 第三章 Android界面事件处理（一）—— 杰瑞教育原创教材试读

      前  言 JRedu Android应用开发中,除了界面编程外,另一个重要的内容就是组件的事件处理.在Android系统中,存在多种界面事件,比如触摸事件.按键事件.点击事件等.在用户交互过程中, ...

  10. impala-shell常用命令

    1.查看相关内网IP: cat /etc/hosts 2.进入impala: impala-shell; 3.显示数据库,数据表 show databases: show tables; 4.查看表结 ...