如何设置网页背景图片适应不同屏幕浏览器

[qq_36402950]

新手。用的是bootstrap。
请问各位，如何设置网页的背景图片能够适应不同的屏幕浏览器呢？
background:url(../../Images/xx.jpg) no-repeat;
background-size: cover;
这样设置背景图片之后，只能自动将图片拉伸...看不清晰。
请问有什么科学的办法，可以让背景适应不同尺寸的屏幕浏览器呢？

我想过用一个渐变色的竖条图案，让它在x横向上repeat，但是这样在y方向上不行了呀，不同情况下屏幕浏览器的高度不同，可能显示的效果也是不一样的。

请各位请教！

[不愿意透露姓名的某小学生]

首先，一般来说做多终端适应就需要一张背景图片设计多种尺寸，并且使用媒体查询"@midea"来控制不同设备不同尺寸的背景图片， 如果不想这样的话你可以设置background-position为center让背景居中，再设置no-repeat保证不拉伸，前提是你的图片够大而且需要展示的内容在正中央。

[CriusWhisper]

bootstrap的话可以给div设置自适应，然后将图片以背景的方式写入css的这种方法，至于高度的适配就可以hack或者js的写法了。其实方法蛮多的，具体用哪种方式主要看你的应用场景以及需求情况了。

[qq_36402950]

引用 1 楼 qq_15270921 的回复:

首先，一般来说做多终端适应就需要一张背景图片设计多种尺寸，并且使用媒体查询"@midea"来控制不同设备不同尺寸的背景图片， 如果不想这样的话你可以设置background-position为center让背景居中，再设置no-repeat保证不拉伸，前提是你的图片够大而且需要展示的内容在正中央。

谢谢！明白了。我担心的是，这样的话，图片太大，应该会影响网页的加载速度吧、？

[不愿意透露姓名的某小学生]

引用 3 楼 qq_36402950 的回复:

[quote=引用 1 楼 qq_15270921 的回复:] 首先，一般来说做多终端适应就需要一张背景图片设计多种尺寸，并且使用媒体查询"@midea"来控制不同设备不同尺寸的背景图片， 如果不想这样的话你可以设置background-position为center让背景居中，再设置no-repeat保证不拉伸，前提是你的图片够大而且需要展示的内容在正中央。

谢谢！明白了。我担心的是，这样的话，图片太大，应该会影响网页的加载速度吧、？[/quote] 放心，使用了媒体查询之后，载入图片的时候只会按需载入，比如说，在你设置@midea max-width(手机端的宽){样式}；@midea max-width(PC端的宽){样式}后，手机端它只会载入375*800的图片而PC端只会载入1920*1280的图片。