移动端body高是100%，背景图全屏，如何让背景图上的内容固定在想要的位置

Question

如果设置backgroundsize：100%的话，图片会随设备拉伸，那么里面内容的margin值是固定的，位置就会受到影响。请问该怎么解决呢？

Answer 1

这种情况我做移动端开发的时候也遇到过，当时试了很多，例如百分比布局和CSS3的媒体查询，现在来看百分比并不是很准确，建议用CSS3媒体查询，或者用rem布局的话，就写死background-position的值，如果还有别的机型有适配问题，就只能用媒体查询去写死对应的样式了。

Answer 2

固定在想要的位置，这个问题没看懂。
是要背景图居中吗？ background-position: center;
还是要宽度百分百，高度自适应：background-size: cover;body设置overflow: hidden属性

Answer 3

内容设置为position:fixed；相对屏幕定位器试试

Answer 4

不是很明白你的意思 手机上可以用css3全屏啊 做法很多 百度一堆堆的.

Answer 5

这个简单，固定一下你的viewport就行了，在所有手机上显示就一致了

Answer 6

如果图片比例不变，可以根据“margin百分比都是根据宽度来决定的”这个特性来做，但是如果图片比例变化，要用js来做。

Answer 7

margin值不要用px，用百分比

Answer 8

背景给个cover,反正你背景也不变,你把背景位置固定之后,元素给固定的margin也没啥问题啊

Answer 9

建议用等于或者大于全屏的高度噢，background-size: 100% auto，这样图片不会压缩