2016-12-16 56 views
1

我想为spn web应用程序设置背景图像,我需要修复背景(它不会与页面的其余部分一起滚动)。背景附件:固定在移动

这是身体的CSS:

body { 
    background-color: rgb(51, 102, 102); 
    background-image: url('../images/background.png'); 
    background-attachment: fixed; 
    background-position: center; 
    color: #eee; 
} 

Safari在IOS和铬在Android重复的背景代替在一个点固定它的。

我已经在互联网上看到它已被禁用在手机上,但有没有解决方案?

回答

0
background-repeat: no-repeat; 
background-position: center center; 
0

还有其他的选择可以做到这一点,但这是唯一真正为我工作的人;我尝试了所有这些。

您将div设置在最初的标记下方。然后将图像应用于div内的html。给予div和id属性(在这种情况下为#background_wrap)。 ...我尝试了这种方式,但没有在HTML中应用实际的图像链接,它从来没有正常工作,因为在将图像应用到CSS背景时,仍然必须使用“background-image:”属性。让这个在移动设备上工作的技巧是不使用任何背景图像设置。这些值是我的项目的特定值,但对于我的固定背景图像而言,它完全适用于移动以及较大的计算机视口,并保持居中和响应。可能需要为您的特定项目调整一些值,但值得一试!我希望这有帮助。

<body> 
    <div id="background_wrap"><img src="~/images/yourimage.png"/></div> 
</body> 

然后在CSS应用这些设置。

#background_wrap { 
margin-left: auto; 
margin-right: auto; 
} 
    #background_wrap img { 
     z-index: -1; 
     position: fixed; 
     padding-top: 4.7em; 
     padding-left: 10%; 
     width: 90%; 
    }