Background image fullscreen

This information has been repeated many times, if you’d just looked or searched for background you’d find the following CSS:

body.custom-background {
    background-size: cover !important;
    background-position: center !important;
}

Depending on your image, you may wish to use a different position. Here is the CSS documentation on background-position:
https://www.w3schools.com/cssref/pr_background-position.asp

If you are not using a child theme, you can add this code using a plugin for custom CSS such as Jetpack or this one:
https://www.ads-software.com/plugins/simple-custom-css/

* N.B. There is a strange bug with fullscreen background images on mobile, so while this will work on desktops, at the moment it doesn’t work on mobile.

Hello,
Thank you lloydo3000 but it doesn’t work. In my website, I don’t use the 2 buttons and it reduces the display of the big title section ! I would like the big title section in fullscreen.

For information, I use a child theme.

Thank you ?? Seb

Hi,

Unfortunately the theme doesn’t support this customization and as much as I would love to help with some custom code, this is beyond the support offered for the free products, which consist in bug fixing and theme documentation.

Regards,
Alexandra

Hi Seb,

You can try the below code, make sure to test it in lots of browsers. You might have to alter the 36em in some cases (it is for browsers which don’t understand vh — 100vh means 100% of viewport height).

Cheers,
Lloyd

/* give section some height or 100vh if supported by browser */
.header-content-wrap {
    background: transparent; /* optionally remove dark shading from photo */
    padding: 0 !important;
    display: table;
    height: 36em;
    height: 100vh;
    width: 100%;
}
/* position content vertically */
.header-content-wrap .container {
    display: table-cell;
    vertical-align: middle;
}