Front Page Image

You can personalize your website by uploading a large background image for the top of the front page.
Note that you will also need to have at least one widget added to Front Page 1 widget area.

Since a different part of the image may show for different screen resolutions, it's best to choose an image that will look great no matter what the screen size.

Go to Appearance > Customize > Front Page Image to select your new image.
The demo image is 1600px X 1000px.

Click Change Image to choose from the Media Library or to upload from your computer.

front-page-image

Fix Blurry Background Image on iPad and iPhone

There is an issue with iPad and iPhone browsers that make the Front Page background image super large, so that it's blurry and not recognizable.

Here's how to fix it.

Go to Appearance > Customize > Additional CSS.
Copy and paste in the CSS below.
WordPress Additional CSS will tell that there is an error.
Just check the box next to: Update anyway, even though it might break your site?
Click the blue Publish button.

/* Fix Blurry Background on iPad and iPhone */
@supports (-webkit-touch-callout: none) {
	body.front-page {
		background-attachment: scroll;
		height: auto;
		max-height: 100vh;
	}
}
/* End Fix Blurry Background on iPad and iPhone */

Note that if you have a lot of text over your image, you may need to increase
max-height: 100vh;
to
max-height: 150vh;
or even more.

Agent Focused Pro 2 Theme Setup

Fix Blurry Background Image on iPad and iPhone