<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. Windows全屏代码--摘自Chrome

    变量定义: typedef struct SCREEN_INFO { DWORD dwStyle; DWORD dwExStyle; CRect rect; bool bMaximized; }Sre ...

  2. Cogs 729. [网络流24题] 圆桌聚餐

    [网络流24题] 圆桌聚餐 ★★ 输入文件:roundtable.in 输出文件:roundtable.out 评测插件 时间限制:1 s 内存限制:128 MB «问题描述: 假设有来自m 个不同单 ...

  3. 使用已有的jmeter测试结果日志文件生成html报告

    当并发数较大的时候,经常会出现测试结束后没有生成html报告的情况 解决办法: 测试结束后,使用生成的jmeter测试结果日志文件.jtl生成html报告 基本命令格式: jmeter -g < ...

  4. Map集合循环遍历的几种方式

    package cn.jdbc.test;import java.util.HashMap;import java.util.Iterator;import java.util.Map;import ...

  5. MySQL字段命名不能使用的MySQL关键字

    #今天遇到一个问题,把某一字段重新命名为condition时报错,于是联想到可能是MySQL的关键字,用``引起来后,问题解决. #在MySQL数据库中,Table字段不能使用MySQL关键字: #[ ...

  6. 什么是跨平台性？原理是什么？JVM

    所谓跨平台性,是指java语言编写的程序,一次编译后,可以在多个系统平台上运行. 实现原理:Java程序是通过java虚拟机在系统平台上运行的,只要该系统可以安装相应的java虚拟机,该系统就可以运行 ...

  7. centos7下面装fastdfs

    首先我完全是按照这个链接上面来的,其中也算有点小错https://blog.csdn.net/ty5546/article/details/79245648 环境准备编译环境 yum install ...

  8. Redis 4.x RCE 复现学习

    攻击场景: 能够访问远程redis的端口(直接访问或者SSRF) 对redis服务器可以访问到的另一台服务器有控制权 实际上就是通过主从特性来 同步传输数据,同时利用模块加载来加载恶意的用来进行命令执 ...

  9. HearthBuddy 突袭 rush

    https://hearthstone.gamepedia.com/Rush Rush is an ability allowing a minion to attack other minions ...

  10. Flutter移动电商实战 --（5）dio基础_引入和简单的Get请求

    这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库. 1.dio介绍和引入 dio是一个强大的Dart Http请求库,支持Res ...