Sometimes, running your own business means you need to create a landing page. And if you don’t have the budget to invest in a fancy software like LeadPages, you don’t have to. In fact, if you already have a website and the Divi theme in place, creating stunning pages is actually rather easy. In this bite-sized tutorial, I’m going to show you the simple CSS code you’ll need to add to make your landing page have a full cover-size background image.

There’s a couple of things you’ll need before getting started – the Divi theme or page builder and a high-resolution image – make sure it’s at least 2560 pixels wide x 1440 pixels high. Getting the size right is important so the image doesn’t look pixelated for folks using huge monitors like 5k retina iMacs.

Ready? I promise this will be painless.

• Upload your image to the media library of your site.
• Copy the link of the image location. You’ll need this soon.
• You need to create your landing page, so start with creating the new page and title it appropriately.
• Open the Divi page builder.
• Select the hamburger icon in the top bar for “Settings.”
• Insert Custom CSS:

[css].page-id-### { background-image: url(); background-size: cover;}[/css]

• Change ### to the id of your page
• Change the custom background image URL to file stored on your site or a solid background color
• Save

That’s really all there is to creating a background cover image.

When this page is visited now, the background image will cover the entire screen. It’s worth noting that depending on the screen it’s being viewed on, it will not show the “excess,” so choose a photo that looks good at various points. If you are unsure how the photo looks on different screens, you can easily check it within a Chrome browser.

Open the Developer tools, select the device icon and test different display settings. This isn’t exact but gives you a pretty good idea of how it will look for others viewing your site on various mobile devices.