<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. docker自定义镜像仓库

    创建私有仓库 vim /etc/docker/daemon.json //使用私有仓库运行容器 , 宿主机ip { "insecure-registries" : ["1 ...

  2. .net上传大文件的解决方案

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  3. ubuntu配置pip3以及scrapy

    .安装支持pip3 sudo apt-get install python3-pip .安装scrapy 首先需要安装scrapy依赖项,否则scrapy安装失败,执行如下命令: sudo apt-g ...

  4. assign修饰对象类型会怎样？

    首先我们需要明确,对象的内存一般被分配到堆上,基本数据类型和oc数据类型一般被分配在栈上. 如果用assign修饰对象,当对象释放后(因为不存在强引用,离开作用域对象内存可能被回收),指针的地址还是存 ...

  5. 手把手教你设置MongoDB密码

    mongodb密码和传统数据如mysql等有些区别: mongodb的用户名和密码是基于特定数据库的,而不是基于整个系统的.所有所有数据库db都需要设置密码. 1. 查看所有数据库(在mongodb新 ...

  6. 0ctf-Wallbreaker Easy复现

    补坑+1. 有预留的后门,并且给了phpinfo,因此可以从phpinfo中先搜集一波信息: 这里禁用了很多命令执行的函数,所以应该要bypass_disablefunction,先读一下flag在哪 ...

  7. git基本操作命令和安装

    git客户端下载及安装 git.png git官方下载链接 1. 添加到桌面 添加到桌面.png (1)图标组件(Addition icons) : 选择是否创建桌面快捷方式. (2)桌面浏览(Win ...

  8. Java：基础知识点

    1. 面向对象的特征 (1)封装:把过程和数据包围起来,对数据的访问只能通过已定义的界面.即现实世界可以被描绘成一系列完全自治.封装的对象,这些对象通过一个受保护的接口访问其他对象:(2)继承:是一种 ...

  9. Fragment向下兼容

    * android-support-v4都用这个包里的类* 让activity继承FragmentActivity* 获取管理器 getSupportFragmentManager();

  10. 关于微信XML解析存在的安全问题

    ---恢复内容开始--- 前言: 最近微信官方提出:微信支付商户,最近暴露的XML外部实体注入漏洞(XML External Entity Injection,简称 XXE),该安全问题是由XML组件 ...