Interesting stuff also happens in the background. Therefore, you can add a nice, smooth background layer to your company’s homepage. Best in your corporate identity color shapes. You can also add a background image or a CSS gradient. I like the gradients very much, therefore I would recommend using your color schemes as a basis for a gradient which will enrich your website. But as some browsers have some difficulties to render gradients or full page background images, as you can read out here, you also have to follow these instructions when it comes to relatively simple to handle WordPress installations.

If your theme has the custom background option available, setting up a background comes relatively handy. Usually you can upload an image or set a gradient in the old customizer or within the new Gutenberg Editor.

But if your website doesn’t have a fixed footer, you might have the same problems as Murtuzaali Surti described in his article. I also experienced this by developing the layout of this website. So I searched for a solution for my WordPress installations. This one for example is build on the default Twenty Twenty-Three Theme which is provided by the WordPress community.

To take control over this small white bar which appears on the bottom of some mobile browsers, I found out that there are various ways/elements to attach the background to. Maybe you are familiar to the body class, where typically background images and gradients are attached to like this:

body {
	height: 100vh;
	background-image: url("https://www.some.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

Resulting also in a white bar on the bottom of the page in some mobile browsers. So I tried out some different classes and found the .wp-site-blocks. Which, when you have a fixed footer on mobile, covers up the entire page, just in case you have your footer height set properly and not set an opacity to your footer.

My workaround might be a little hacky and uncommon but delivers the expected seamless covering of the background.

First we have to set the body and HTML tags via the custom CSS like this:

@media only screen and (max-width:768px) {
    body,
    html {
        height: 100vh;
    }
   
    body {
        overflow: auto;
        background: your color;
    }

After this, you attach the background to the .wp-site-blocks tag:

  .wp-site-blocks
    {   
        background-image: url("https://www.some.jpg") fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin:0;
    }

or with a gradient:

  .wp-site-blocks
    {   
        background: #061217 fixed;
        background: -moz-linear-gradient(VALUES) fixed;
        background: -webkit-linear-gradient(VALUES) fixed;
        background: linear-gradient(VALUES) fixed;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin:0;
    }

Here you can find additional information or just contact 3close.

Featured image comes from pexels.