Question

所以一切都在浏览器上正常运行，但是当涉及到移动设备时，背景会被放大。我使用cover关键字来扩展背景图像。

background-image: url({{ settings.site_bg_image | asset_url }});
background-position: {{ settings.bg_image_y_position }} {{ settings.bg_image_x_position }};
background-repeat: {{ settings.bg_image_repeat }};
background-attachment: {{ settings.bg_image_attachment }};
background-size: cover;

后端位置设置设置为顶部中心

平铺：垂直平铺

滚动：保持不变

这是一个检查发生了什么的链接 http://www.iconiccustomguitars.com

感谢任何帮助。提前谢谢。

Answer 1

尝试更改

background: url(bg.png);

到

background-image: url(bg.png);

还要为它添加引号，使其像这样：

background-image: url("bg.png");

Answer 2

您的图片尺寸是个问题，但我可能会为您提供解决方案。我建议在photoshop中剪切图像以剪切一些移动中间空间。

但试试这个

background-size:contain;

在y轴上重复图像，保持纵横比

OR

background-size:100% 100%;

将图像拉伸到视口;

背景图片大小不适用于移动设备

2 个答案: