1. Home
  2. Docs
  3. Winning Agent Pro 2 Theme...
  4. Customize Your Theme
  5. Background Image

Background Image

You can personalize your website by uploading a large background image to use on all pages.
Note that you will also want to have at least one widget added to Home Welcome widget area for the image section to be large enough.

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. If your image is blurry on iPad or iPhone see:
Fix Blurry Background Image on iPad and iPhone

Go to Appearance > Customize > Background Image to select your new image.
The demo image is 1800px wide.

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

winning agent change background image

Use the following settings:

  • Preset: Fill Screen
  • Image Position: the center dot is the best, but you can adjust for your image
  • Image Size: Fill Screen
  • Do not check either of: Repeat Background Image or Scroll with Page

add background image settings

Fix Blurry Background Image on iPad and iPhone

There is an issue with iPad and iPhone browsers that make the 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.custom-background,
	body.no-background {
		background-attachment: scroll;
		height: auto;
		max-height: 150vh;
	}
	@media only screen and (max-width: 768px) {
		body.custom-background,
		body.no-background {
			max-height: 100vh;
		}
	}
}