如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做:
<style type="text/css">
html{height: %;}
body.aa{height: auto;
background: url(login-background.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: rgba(, , , .)}
</style>
bootstrop中
css中编辑此样式:
.bg {
background:url(图片地址) no-repeat center;
background-size:contain;
}

然后在你的div里引用这个样式就行了:

<div class="row bg">
使图片不随滚动条滚动,即固定不动则加fixd:
.bg {
background:url(图片地址) no-repeat center fixed;
background-size:contain;
}

bootstrop设置背景图片自适应屏幕的更多相关文章

  1. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  2. H5 背景图片自适应屏幕问题解决办法

    今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...

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

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

  4. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  5. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. 小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshiton ...

  8. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  9. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

随机推荐

  1. 20175314 实验五 Java网络编程

    20175314 实验五 Java网络编程 一.实验报告封面 课程:Java程序设计 班级:1753班 姓名:薛勐 学号:20175314 指导教师:娄嘉鹏 实验日期:2018年5月31日 实验时间: ...

  2. .Net微服务实践(三):Ocelot配置路由和请求聚合

    目录 配置 路由 基本配置 占位符 万能模板 优先级 查询参数 请求聚合 默认聚合 自定义聚合 最后 在上篇.Net微服务实践(二):Ocelot介绍和快速开始中我们介绍了Ocelot,创建了一个Oc ...

  3. 字典树基础进阶全掌握(Trie树、01字典树、后缀自动机、AC自动机)

    字典树 概述     字典树,又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它 ...

  4. D 【BJOI2018】求和

    时间限制 : 20000 MS   空间限制 : 565536 KB 评测说明 : 2s,512m 问题描述 master 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径 ...

  5. Http协议中Cookie使用详细介绍

    Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的.硬盘Cookie ...

  6. 1026 Table Tennis (30分)

    A table tennis club has N tables available to the public. The tables are numbered from 1 to N. For a ...

  7. 微信小程序引入腾讯地图API方法

    微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无 ...

  8. Mac下Web切图常用PS快捷命令

    Mac下 Z 放大镜 双击放大镜   图片会回到100%大小 C 切片工具 B 画笔    alt 在B模式下 吸取颜色 M   选区(默认) 点击第二次M   矩形选区 可以固定大小 shift+c ...

  9. Linux 用户管理篇(一)

    查看当前在线的用户    who 切换不同用户工作界面    ctrl + alt + [F1 - F6] 切换图形界面        ctrl + alt + F7 注消用户        exit ...

  10. GhostNet: 使用简单的线性变换生成特征图,超越MobileNetV3的轻量级网络 | CVPR 2020

    为了减少神经网络的计算消耗,论文提出Ghost模块来构建高效的网络结果.该模块将原始的卷积层分成两部分,先使用更少的卷积核来生成少量内在特征图,然后通过简单的线性变化操作来进一步高效地生成ghost特 ...