bootstrap设置背景图片自适应屏幕

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;
}

原文地址:https://www.cnblogs.com/Hayley1666/p/8479491.html

时间: 2024-11-07 03:54:42

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

bootstrap设置背景图片自适应屏幕大小

css中编辑此样式: 1 2 3 4 .bg {        background:url(图片地址) no-repeat center;        background-size:contain; } 然后在你的div里引用这个样式就行了: 1 <div class="row bg"> 使图片不随滚动条滚动,即固定不动则加fixd,css代码如下: 1 2 3 4 .bg {        background:url(图片地址) no-repeat center

设置背景图片自适应

.body { background-size: cover; overflow: hidden; } 设置背景图片完全显示,不会缺少一部分 原文地址:https://www.cnblogs.com/bchange/p/9182248.html

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

由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3.body的background属性去掉,要不然会被遮住 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/

div背景图片自适应

在为文莱的一个天气预报网站做页面,突然遇到一个问题,就是需要div的背景图片自适应屏幕大小,网上找了好久,chrome都无效,最后找到了一个,说要这么写 .product_wx { background:url('../images2/bgd_1.jpg'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale'); -moz-background-size:100% 100%; backgr

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好: 眼过千遍不如手过一遍,这就把需要记忆的东西记下来. 很多时候我们遇到的情况是: 设置背景图片background-image:url(xxx.jpg); 如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了 background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域. 这个属性有四个值: length 设

让网页背景图片 根据屏幕大小自动铺满

让网页背景图片 根据屏幕大小自动铺满:设置两层div,底层div当做背景使用,放置一张图片即可.<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/>&

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

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment