移动网页设计:背景图片大小

时间:2014-12-19 13:23:03

标签: html css mobile

目前正在开发网站的移动版本。我有这个:

body {
background-image : url("my_image.png");
background-repeat : no-repeat;
background-size: 100%;

}

背景图片填满整个设备屏幕。题。 px(宽度)的大小最适合智能手机?目前正在考虑使用宽度为640px的背景图像。这个可以吗?有什么建议吗?

2 个答案:

答案 0 :(得分:1)

640px是iPhone的宽度,因此它是最小宽度之一。例如,Galaxy Note 3的宽度为1080px。如果你想使用绝对图像大小,我建议使用更大的图像。

然而,我认为最好的做法是使用背景图像来展开自己以匹配屏幕尺寸,如Sajad的回答所述。

答案 1 :(得分:1)

使用background-size: covercontain通常是最佳选择 但是,大背景可能会被裁剪,因此您可以使用媒体查询为不同的屏幕尺寸设置background-position或不同的背景,但上述情况通常正常。


background-size属性:

cover
将背景图像缩放为尽可能大,以便背景区域完全被背景图像覆盖。

contain
将图像缩放到最大尺寸,使其宽度和高度都适合内容区域。

Source