0

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

DAN
  • 15
  • 1
  • 7
  • 1
    `background-size: 100vw 100vh` but it will stretch. – G-Cyrillus Nov 13 '20 at 21:30
  • Does this answer your question? [CSS - Show Entire Image as Background Without Cropping](https://stackoverflow.com/questions/32261267/css-show-entire-image-as-background-without-cropping) – disinfor Nov 13 '20 at 22:05

1 Answers1

0

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!)

A Haworth
  • 30,908
  • 4
  • 11
  • 14