Turn this:

Into this:

Alright, I'll be the first to admit that this is a little ugly - so promise me that you'll pick a prettier image :)

To make this work, you'll need an image URL - in this example I'm using Unsplash. If you have the image on your computer, upload it to your website or any image hosting platform to retrieve the URL.

Once you have that, you'd need to add this snippet to Settings -> General -> Advanced Settings -> Custom CSS:

div#mv_welcome_area {
   background: url(https://images.unsplash.com/photo-1586809784406-0665c2d5d819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
   background-repeat: no-repeat;
   background-size: cover;
}

You might also want to left-align the welcome text - in that case, add this as well:

div#mv_welcome_area .hidden {
display: none;}

The fine print

When you're adding an image to any area that has other elements (like text and buttons in this case), it's super important to keep in mind that whatever looks wonderful on your desktop, might look messy on mobile - so make sure to test! If you're using a nonfigurative pattern or texture, it's less of an issue, but if you're using an image with people or objects on it, it can get squished and weird-looking.

To deal with this, one option is to add code that'll make sure that the image is only used on large enough screens. You can do this by wrapping the code above like this:

@media screen and (min-width: 800px) {

/*Code comes here*/

}

Essentially, this would make sure that the image is only displayed when the screen size is 800px wide and above - and for smaller screens, you'll see the background color you set in the settings.

Now, the exact value is going to depend on the image that you're using, so you'd need to find the smallest screen size where your image still looks good, and use that as min-width. The welcome text jumps to full width at 1024px, so that would be a good starting value. So, putting it all together, you'd paste:

@media screen and (min-width: 1024px) {

 div#mv_welcome_area {
   background: url(https://images.unsplash.com/photo-1586809784406-0665c2d5d819?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
   background-repeat: no-repeat;
   background-size: cover;
}

}