Фоновое изображение размыто на маленьких экранах (выглядит хорошо в редакторах Wordpress / Chrome, но на реальном телефоне оно размыто - PullRequest
Новая
       13

Фоновое изображение размыто на маленьких экранах (выглядит хорошо в редакторах Wordpress / Chrome, но на реальном телефоне оно размыто

0 голосов
/ 01 марта 2019

Я боролся с этим некоторое время, так что надеялся, что кто-нибудь сможет мне помочь.

Я использую плагин WP Bakery, и фоновые изображения, которые я установил, действительно размыты на небольших экранах.Все выглядит отлично в визуальных редакторах Wordpress / Chrome, но на реальном телефоне / планшете размер фотографии не изменяется, так что это просто размытый беспорядок.CSS выглядит следующим образом:

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; }

Адрес веб-сайта: 414kiting.com

Любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Я нашел решение - это наверняка сработает :), Можете ли вы попробовать это с помощью медиа-запроса: 

@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;
}

}
0 голосов
/ 01 марта 2019

Многие мобильные браузеры не поддерживают 

background-attachment: fixed;

Лучший способ решить эту проблему - выполнить медиазапрос для планшетов меньшего размера и сделать фоновое вложение: прокрутка или начальная буква, а затем попытаться выполнитьсмоделируйте эффект или просто отмените его на мобильных устройствах.

Редактировать: опечатка

...