<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. Codeforces Round #587 (Div. 3) D. Swords

    链接: https://codeforces.com/contest/1216/problem/D 题意: There were n types of swords in the theater ba ...

  2. Codeforces Round #589 (Div. 2) E. Another Filling the Grid(DP, 组合数学)

    链接: https://codeforces.com/contest/1228/problem/E 题意: You have n×n square grid and an integer k. Put ...

  3. [Javascript] Customize Behavior when Accessing Properties with Proxy Handlers

    A Proxy allows you to trap what happens when you try to get a property value off of an object and do ...

  4. IDEA配置和插件

    1.相关配置 设置字体和大小 2.插件 maven helper 解决maven包冲突的问题 打开pom文件,并可以切换tab,简单使用,如下图 RestfulToolkit RestfulToolk ...

  5. Can't install '*' from pristine store, because no checksum is recorded for this file

    svn同步时,提示clean up,但clean up 时提示: Error:Error performing cleanup for 'E:\project\projectProjectIDEA\b ...

  6. a a[0] &a &a[0]的理解

    数组中几个关键符号(a a[0] &a &a[0])的理解(前提是 int a[10])(1)这4个符号搞清楚了,数组相关的很多问题都有答案了.理解这些符号的时候要和左值右值结合起来, ...

  7. 为orangepi zero编译安装nginx记录

    使用的系统是armbian 1.下载nginx源代码 wget http://nginx.org/download/nginx-1.17.0.tar.gz 2.解压nginx源代码 tar xvzf ...

  8. Java学习笔记（持续更新ing）

    1.在读入字符串时:    str = sc.nextLine();     //读入一行                                     str = sc.next();   ...

  9. input控件的checkbox属性自定义勾选框

    思路 首先隐藏input默认勾选框    通过绑定label标签,设置label的样式来设置勾选框 效果 在这里插入图片描述代码 # html中input的checkbox定义,使用for循环创建多个 ...

  10. RHEL防火墙命令

    firewall-cmd --state 查看防火墙状态 firewall-cmd --reload #重启firewall systemctl stop firewalld.service #停止f ...