背景图片居中全屏自适应显示

.bg{

background-size: cover;
background-image:url(../assets/images/sunshine.png);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;

}

时间： 2024-10-01 03:03:41

背景图片居中全屏自适应显示的相关文章

仿百度首页背景图片始终全屏

利用position:fixed属性新建一个全屏的层,将背景图片置于这个层中,这样就不会随着鼠标滚轮的滚动而改变背景图片的大小. 主要css: .image_bg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1} .image_bg img{position:absolute;left:0;top:0;margin:0 auto; width:100%;height:100%;z-index:-1} 测试代码: <!DO

修改linux内核开机logo并居中全屏显示【转】

本文转载自:http://blog.csdn.net/xuezhimeng2010/article/details/49299781 1.准备图片使用ubuntu自带的绘图软件GIMP是最为快捷的方式,使用命令进行转换也可以,实际测试中用命令转换图片老提示错误,所以就用GIMP的方式处理了.具体流程如下:(1)打开GIMP软件并加载图片资源(file->open),自己的原图片格式应该不限制,我的是bmp格式的.(2)点击Image->mode->Indexed 并在弹出的选项框内设

关于补丁宽高图片全屏垂直居中显示的问题

父级必设属性: display:table;//让子级垂直居中 text-align:center//让子级水平居中子级必设属性: display: table-cell; vertical-align: middle; 要点:父级要给宽高,子级在父级所设的宽高之内居中显示,如果图片要全屏居中显示,父级同过JS设置成窗口大小,若不希望图片超出窗口范围,可以设置图片的最大宽高为窗口的宽高.

IE/Chrome背景图片居中1px偏移解决方法

最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面如下图从图中可以看到本页面为经典的顶部大图通栏,尺寸为1210px,但是为了兼顾所有分辨率,所以作为背景图片居中处理.内容区域为常用的经典栅格布局990px,设置margin:0 auto;大概的伪代码结构如下: XHTML 1 2 3 4 <div id=”content”> <div

全兼容的全屏自适应布局

1.原理 body, html高度等到全屏高度使用position:absolute;的方式来定义最外层的div, 内层的div 可以通过height:100%来渲染高, 这样就可以说不用在js的帮助下来实现全立屏的自适应布局关于兼容 ie6 采用让body的上内边距等到 top 层的高度, 下内边距等到 bottom 层的高度, 通过这样的效果达到中间层高度等height:100%的效果内层 inner-box 的高度在 ie67 无法实现height:100%的效果, 因为如果在 ie

用CSS让网页背景图片居中的方法

网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便: <div sty

DIV+CSS中让布局居中_背景图片居中_文字内容居中

首页背景图片在PC端有显示，在手机端不显示的解决方法

今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: background-size:100% auto; 如果想要背景图片贴满整个屏幕,则加入如下代码: background-size:100% 100%; 原文地址:https://www.cnblogs.com/yangzhou33/p/8414512.html

转 Div+Css控制背景图片水平垂直居中显示背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo