<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. ios之申请后台延时执行和做一个假后台的方法

    转自:http://sis hu ok.com/forum/blogCategory/showByCategory.html?categories_id=138&user_id=10385   ...

  2. LeakCanary 原理浅析

    前言 提到Java语言的特点,无论是教科书还是程序员一般都会罗列出面向对象.可移植性及安全等特点.但如果你是一位刚从C/C++转到Java的程序员,对Java语言的特性除了面向对象之外,最外直接的应当 ...

  3. nodejs ffi(DLL)

    npm install ffi Error: The specified module could not be found. npm rebuild var ffi = require('ffi') ...

  4. caffe 生成检测框并绘图

    Step 1 使用训练好的模型检测图片: build/examples/ssd/ssd_detect.bin models/VGGNet/VOC0712/SSD_300x300/deploy.prot ...

  5. 如何设置浏览器禁止使用UC浏览器

    通过UA可以判断浏览器是否是UC浏览器 if(navigator.userAgent.indexOf('UCBrowser')>-1) {  alert("当前浏览器不支持本站,建议更 ...

  6. 程序中try、throw、catch三者之间的关系

    c++程序中,采用一种专门的结构化处理逻辑的异常处理机制. 1.try语句 try语句块的作用是启动异常处理机制,检测try语句块中程序语句执行时可能出现的异常. try语句块总是与catch一同出现 ...

  7. 谈谈Enter回车键提交表单那些事 回车搜索 enter搜索

    我们在做系统前端的时候,往往会用到form标签,采用jquery插件做表单验证.我们信誓旦旦的一位把一切都做好的时候,并且检查一遍又一遍的时候,意向不到的事情发生了,也许是出于一种意外,而这种意外我们 ...

  8. Restore IP Addresses leetcode java

    题目: Given a string containing only digits, restore it by returning all possible valid IP address com ...

  9. 使用矩阵分解(SVD)实现推荐系统

    http://ling0322.info/2013/05/07/recommander-system.html 这个学期Web智能与社会计算的大作业就是完成一个推荐系统参加百度电影推荐算法大赛,成绩按 ...

  10. 用bochs调试自己写的系统引导代码

    1 安装和配置bochs 首先从bochs.sourceforge.net里面把BOCHS给download下来,鉴于Windows的普及,仅仅谈BOCHS在win下的使用方法,其实在其它的OS中方法 ...