1. Prioritize
When it comes to using larger images in the background or anywhere on the page, you have to stop and consider what you want your priority to be on the page. Compelling images can be engaging and inspiring to your audience. However, those same images can also fall flat if placed incorrectly on the page. To make sure your photos are not distracting and are placed correctly:- Try to step back and view your site as though you’re seeing it for the first time.
- Eliminate color schemes that clash.
- If you are placing a headline over the image, make sure you place it somewhere with space and don’t cover important parts of the image.
- Conduct A/B testing to ensure you aren’t turning off visitors by making your website too busy.

2. Unify Your Color Scheme
There are a number of ways you can unify your color scheme. One of your first steps should be to make sure you are using colors within the same palette. You can upload your background image to a tool like Pictaculous to get color scheme recommendations based on the image. You’ll also want to make sure your text coordinates with your colors and is easy to read. Some tips for making your text pop even on a full-screen background include:- Fading the background to make it more unified and subtle.
- Overlaying a solid color for text so the text pops instead of being difficult to read against a background.
- Putting the text over a gradient to a solid color.

3. Make Mobile Responsive
As of 2014, the number of browsers accessing the Internet via a mobile device versus a desktop has reached a “tipping point.” There are now more mobile users than desktop users. That means it is important that your site works for different screen sizes. This can be an issue with a full-screen background that is created for a specific size screen. Some things you can do include:- Testing your site in different types of window sizes. One tool for this is BrowserStack, but there are many others available.
- Hiring a programmer or coding yourself to ensure your site adapts correctly for mobile browsers.
- Using a WordPress theme that is already mobile responsive and tweaking it to suit your own tastes and design needs.


4. Be Smart About CTA Placement
More than likely, you’ve created a landing page because you want to convert site visitors either into customers or to get them to sign up for a mailing list, etc. However, a full-screen background can sometimes detract from other elements on the page as it will draw the visitor’s eye. This makes it extremely important to place your call to action in a smart place that will entice the reader to click. Here are a few things to consider:- When you look at the image and text, where is your eye naturally drawn? Most Westerners, for example, read left to right and top to bottom.
- Does the CTA stand out? Is it bold enough to show up against the background?
- The CTA should be one of the few elements on the page. If you limit the choices of where a site visitor can click, they are more likely to click on your CTA.

5. Start with a Great Image
Since the image is going to fill the user’s screen, you want to start with large, high-quality images. You can always scale them down, but get that image in the largest resolution you possibly can to start. While it’s true you’ll need to compress it to get it to load quickly for browsers, you are much better off starting higher than you need and scaling down than the reverse. Trying to do the opposite will result in a distractingly fuzzy image. Here’s what you can do to get your background image how you want it:- Get the image in highest resolution available.
- Make sure the image fills the screen proportionately or can be cropped to fit and still look great.
- Wix recommends using images 1250×800 pixels or higher for full-screen background images.
