<body>

<div>

    <!--背景图片-->

    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>

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

</div>

</body>

以上是需求代码

以下是实现css样式代码

#web_bg{

  position:fixed;

  top:;

  left:;

  width:100%;

  height:100%;

  min-width: 1000px;

  z-index:-10;

  zoom:;

  background-color: #fff;

  background-repeat: no-repeat;

  background-size: cover;

  -webkit-background-size: cover;

  -o-background-size: cover;

  background-position: center 0;

}

通过以上操作，我们可以实现将一张图片作为网页背景，且不会因为浏览器的尺寸导致留白和重复

前端CSS实现图片自适应背景大小的更多相关文章

  1. pyqt5：图片自适应QLabel大小和图片移除

    参考链接: https://www.e-learn.cn/content/qita/669569 图片自适应QLabel大小 # coding=utf- import sys from PyQt5.Q ...

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

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

  3. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  4. css -- 背景图片自适应屏幕大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  5. html/css背景图片自适应分辨率大小

    <style type='text/css'> .bgbox { position: absolute; left: 0; top: 0; width: 100%; overflow: h ...

  6. css 背景图片自适应分辨率大小 兼容

    拉伸,all浏览器兼容.bg{     background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);     filter:&q ...

  7. HTML中使背景图片自适应浏览器大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  8. 设置图片自适应DIV大小

    可以利用CSS样式表中表示后代的复合选择器进行设置.例: <head> <style type="text/css"> #right img /*设定box ...

  9. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

随机推荐

  1. 001_C/C++笔试题_考察C/C++语言基础概念

    (一)文章来自:C/C++笔试题-主要考察C/C++语言基础概念.算法及编程,附参考答案 (二)基础概念 2. 头文件中的ifndef/define/endif的作用? 答:防止该头文件被重复引用. ...

  2. APPLICATION FAILED TO START 报错

    错误一 原因@Service 忘记加了

  3. Java进阶知识09 Hibernate一对多单向关联（Annotation+XML实现）

    1.Annotation 注解版 1.1.在一的一方加Set 1.2.创建Customer类和Order类 package com.shore.model; import java.util.Hash ...

  4. CSP-S2019游记——终点

    准退役一年了,回来苟CSP,填补去年留下的遗憾,也算是为这个不那么完美的高中OI生涯划一个句点吧. DAY 1 考前:昨天晚上睡得不太好.早上洛谷打卡居然是中吉(3K说的大吉嘞???).在地铁上有点犯 ...

  5. luogu P4843 清理雪道

    嘟嘟嘟 这其实就是一个最小流的板子题.把每一条边的流量至少为1,然后建立附加源汇跑一遍最大流,连上\(t, s\),再跑一遍最大流就是答案. 刚开始我想错了:统计每一个点的出度和入度,去两者较大值\( ...

  6. HGOI 20191101am 题解

    Problem A awesome 给出一个序列$A_i$,任取序列中三个数组成三元组$(a_i , a_j , a_k)$. 输出本质不同的且$abc \equiv 1 (mod  P)$且满足$a ...

  7. vundle

    vundle插件的使用方法: http://adam8157.info/blog/2011/12/use-vundle-to-manage-vim-plugins http://adam8157.in ...

  8. hdu6568 Math （概率dp）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6568 题意: 在$0$到$L$的坐标轴运输货物,在每个整数点可能丢失货物,丢失概率为$p$,丢失后可 ...

  9. Java数组分配内存空间

    分配内存空间 数组名=new 数据类型[数组长度]: new关键字用来实现为数组或对象分配内存 数组具有固定的长度.获取数组的长度: 数组名.length 定义数组+分配内存空间 数据类型[]数组名= ...

  10. 预处理、const、static与sizeof-static有什么作用（至少说出2个）

    1:在C语言中,关键字static有3个明显的作用: (1)在函数体,一个被声明为静态的变量在这一函数被调用的过程中维持其值不变. (2)在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所 ...