0

I've been struggling with this one for a while, so hoping someone might be able to help me out.

I'm using WP Bakery plugin, and the page background images I set are really blurry on smaller screens. All looks fine on the Wordpress/Chrome visual editors, but on an actual phone/tablet the photo doesn't resize, so it's just a blurry mess. The CSS is as follows:

body { background-color: #00657f!important; background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; }

website address is 414kiting.com

Any help hugely appreciated.

4

2 回答 2

1

我找到了解决方案 - 这肯定会工作:)，你能用媒体查询试试这个吗：

@media only screen and (max-width : 767px ) {

    body {
        background-attachment: initial;
    }
body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
    background-size: cover;
    background-position: center center;
}

}
于 2019-03-01T12:35:52.827 回答
0

很多手机浏览器不支持

background-attachment: fixed;

解决此问题的最佳方法是对平板电脑尺寸进行媒体查询并降低以制作背景附件：滚动或初始，然后尝试模拟效果或将其丢弃在移动设备上。

编辑：错字

于 2019-03-01T10:37:19.487 回答