css页面背景随意自适应，css背景图片适应屏幕

网站背景图和banner图怎样做成自适应?css怎么改?

1、输入background-size： cover；-webkit-background-size： cover；-o-background-size： cover；使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

2、如果通过css设置背景图，那么图片尺寸要足够大，目前大宽屏1920左右，所以宽度最好设置为1920，然后居中；如果通过div嵌入图片，那么将此div设置成绝对定位，z-index：-1。

3、各位高手，请教一下，我这里有一个jsp的登录页面。页面上除了输入框和按钮外，就是背景图片。其中的输入框的位置都用的是相对位置。但IE或分辨率调整后，仍会发生输入框和背景图错位的情况。

4、可以通过cover和contain来对图片进行伸缩。

5、关键：全屏自适应背景图片关键是图片做足够宽，以最宽分辨率显示屏能都铺满，小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。

相关问答

Q1: css如何实现背景图电脑端/手机端自适应功能

而且背景图片不会随着滚动条滚动而滚动，实现背景图片的自适应。

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入meta代码：。浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。

一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。二是将图片设定display：block，设定图片的长宽为rem或者em。

这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置 100% 参数，而是使用 cover 参数。

背景图宽度自适应方法：添加css样式background-size：100%；它的意思是规定背景图像的尺寸，但这个css样式使用时需要注意，有些浏览器是不支持，比如IE要求9的版本才可以支持。

Q2: CSS设置背景图宽度100%,高度自适应

1、原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。

2、css 大侠们，请教一个问题：假设用户显示器的宽度是1000px，然后用background-image设置一张宽度为800px的背景图片，然后把图片的排列方式设置为no-repeat。问题就出来了。

3、输入position：fixed； top： 0； left： 0；使整个div固定在屏幕的最上方和最左方。

4、既要宽度100%，又要不变形，这两个条件决定了图片的高度不能另外设置，只能跟随宽度的变化而变化，这样就无法保证完全覆盖剩余区域。

5、用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。

Q3: css背景图怎么自适应手机和电脑

1、无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

2、而且背景图片不会随着滚动条滚动而滚动，实现背景图片的自适应。

3、并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。

4、输入position：fixed； top： 0； left： 0；使整个div固定在屏幕的最上方和最左方。

5、scale： 缩放图片以适应对象的尺寸边界。src： 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。特性：Enabled： 可读写。布尔值(Boolean)。参阅 enabled 属性。

6、背景图宽度自适应方法：添加css样式background-size：100%；它的意思是规定背景图像的尺寸，但这个css样式使用时需要注意，有些浏览器是不支持，比如IE要求9的版本才可以支持。

关于css页面背景随意自适应和css背景图片适应屏幕的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。