Can I make the background image full screen when on mobile?

Website www.aeslms.ca

The website has a full screen background image and works well on widescreen desktop view. However, when I resize the browser window to a skinnier view, I end up with empty space on the bottom. If I go even smaller I end up with empty space on top of and below the background image.

The full width of the background image is always shown, but I would like it to fill 100% of the width of the page, and when the page is viewed on a skinny screen, i.e, mobile, I would like it to be 100% of the height, and remain centered.

Any suggestions?

Hello there,

Try this CSS code solution:

body {
  background-image: url('https://aeslms.ca/wp-content/uploads/2018/10/autumn-canada-fall-resized.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

body:after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background-color: rgba(0,0,0,0.3);
  z-index: 2;    
}

.site {
  min-height: 100vh;  
  position: relative;
  z-index: 3;
}

.header-image .large-header,
.header-image .small-header,
.header-image:after {
  opacity: 0;  
}

.header-text img {
  max-height: 350px;
  margin-top: 40px;
}

@media only screen and (max-width: 1024px) {
  .header-text img {
    margin-top: -70px;
  }  
}

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

This almost does the trick, but removes the transparent overlay that covers the background image and shrinks the word cloud we are using.

but removes the transparent overlay that covers the background image

Replace this line background-color: rgba(0,0,0,0.3); with:

background-color: rgba(0,0,0,0.3) !important;

in this code block:

body:after {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background-color: rgba(0,0,0,0.3);
  z-index: 2;    
}

shrinks the word cloud we are using.

To enlarge the image size, adjust the value of max-height in this code block:

.header-text img {
  max-height: 350px;
  margin-top: 40px;
}

Regards,
Kharis