Фоновое изображение не корректируется на планшете (альбомная ориентация) - PullRequest
0 голосов
/ 29 марта 2019

Я столкнулся с этой ошибкой / проблемой с фоном моей домашней страницы (изображение) на планшете.На экране ноутбука или больших экранах все нормально.На мобильных устройствах тоже нормально.Но когда дело доходит до загрузки сайта с планшета, мой фон выглядит очень странно.Изображение похоже на центр всей домашней страницы.Слева, справа, сверху и снизу изображения показаны пустые места.В моем случае они черные.

Таблицы, которые я тестировал, имели следующую ширину (в альбомной ориентации): 1112px, 1280px.

Вот CSS для фона:

element.style {
    margin: 0 auto;
    background: url(https://test.me/images/bg-image-1-1920x1280.jpg) no- 
    repeat fixed right;
    background-size: contain;
}

Здеськак выглядит моя домашняя страница на экране ноутбука: img

А вот как это выглядит на планшете: img2

Может кто-нибудь сказать мне, что мне не хватает?

Спасибо

PS - Я забыл упомянуть, что на скриншоте ноутбука фактическое изображение настроено справа, а слева - черный цвет фона,Я имею в виду, фактическое изображение не на весь экран.

Обновление: я попробовал все, что вы, ребята, предложили, но, похоже, ничего не работает так, как я хочу (скриншот ноутбука)

1 Ответ

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

Я просто изменяю background-position **fixed right** на **center center** и меняю background-size: contain на background-size: cover, надеюсь, это вам поможет.Спасибо

.bg {
  background: url(https://images4.alphacoders.com/279/279526.jpg) no-repeat center center;
  margin: 0 auto;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
<div class="bg"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...