Search code examples
csswordpressbackground-imagecoverdivi

How to make background image cover and fit screen without losing part of the picture? Wordpress - Divi - CSS

I'm trying to make my background image fit the screen without being cut out. I am using Wordpress with the Divi theme and I added additional CSS too. This is the code I used to make the page with a full background image

.page-id-7 {

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

Below is all the code from Wordpress additional CSS

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

The problem I'm trying to solve is that I would like the image to cover the screen and at the same time not be cut out by trying to cover the screen but to fit it perfectly.

thank you in advance

Solution

  • It's not possible to get an image to fit every device's screen perfectly. Unfortunately devices have different aspect ratios, not to mention what happens when a user puts their device into portrait mode from landscape or a desktop user resizes the window.

    If it's important to show all the image then use background-image: contain - the whole image is guaranteed to be shown but for some viewports their aspect ratios won't be the same as your picture and there will be space either at the sides or the top and bottom (assuming you use background-size center.

    You'll notice this sort of thing with videos very often, and there will be black 'bars' above and below the video (or at the sides). Probably the best you can do is have a suitable background color, or just black or white.

    (of course, if you don't care whether your image is distorted you can use 100% width and height, but it's not very often sensible to do that!)