Как сделать так, чтобы фоновая картинка закрывала и умещалась на экране, не теряя при этом части картинки? Wordpress - Divi - CSS

Question

Я пытаюсь подогнать фоновое изображение к экрану, не вырезая его. Я использую Wordpress с темой Divi, и я также добавил дополнительный CSS. Это код, который я использовал для создания страницы с полным фоновым изображением.

.page-id-7 {

background-image: url(https://www.rossabbink.com/wp-content/uploads/2020/11/Homepage-Image-I.jpg);
background-size: cover;}

Ниже весь код из дополнительного CSS Wordpress

.select_page { visibility: hidden; }

span.mobile_menu_bar:before {
color: rgba(30, 30, 30) !important;} .et_mobile_menu { border-top: 3px solid rgba(225, 225, 220);} /* First we have to make the main header transparent */ .page-id-7 #page-container {
padding-top: 0 !important; } .page-id-7 #main-footer { position: absolute; bottom: 0; width: 100%; } /* Here we make the content of our page builder sections transparent. This is so that the background image shows through */ .et_pb_section { background-color: transparent; } /* Here we set the background image for our specific pages. We also set the background image to cover so that it always fills the screen */ .page-id-7 { background-image: url(https://www.rossabbink.com/wp-content/uploads/2020/11/Homepage-Image-I.jpg); background-size: cover; } @media all and (max-width: 980px) { #mobile_menu { background-color: rgba(119, 119, 119, 119) !important;} } .mobile_nav.closed #mobile_menu, .mobile_nav.opened #mobile_menu {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background: linear-gradient(
  rgba(205, 205, 205),
  rgba(66, 66, 66, 0.50) ),url("https://www.rossabbink.com/wp-content/uploads/2020/11/dropdown.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover; } .mobile_nav.opened .mobile_menu_bar:before { content: '\4d'; } 

Проблема, которую я пытаюсь решить, заключается в том, что я хочу, чтобы изображение покрыло экран и в то же время не вырезалось, пытаясь закрыть экран, а чтобы оно идеально подходило к нему.

заранее спасибо

Answer 1

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

Если важно показать все изображение, используйте background-image: contain - все изображение гарантированно будет показано, но для некоторых окон просмотра их соотношения сторон не будут такими же, как у вашего изображения, и будет пространство либо по бокам, либо верх и низ (при условии, что вы используете размер фона center.

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

(конечно, если вам все равно, искажено ли ваше изображение, вы можете использовать 100% ширину и высоту, но это не очень часто имеет смысл!)