You've set up your header, uploaded your background image, only to find your hero image doesn't look so great as it's cropped out half the image. Don't stress, we've got you covered. Let's discuss some ways to select and create your header background images to get them looking their best.

If you are new to setting up headers and haven't read Part 1, we would highly recommend it before continuing with this tutorial.

Getting the perfect image for your header is sometimes a little bit of a challenge. The key to choosing and creating the right images is understanding the header size and how it changes across different browser sizes and devices.

The last thing you want is to crop out someone or lose an important message in one of the most important parts of your page.

Let’s look at our browser resolutions. Resolution size is just the width and height of the screen. Different size monitors will have different resolutions. A large monitor might have a large resolution of 2500 pixels wide whilst smaller screens will be around 1200 pixels wide.

Most headers are set up to use the full width of the page. The height generally for a home page header is around 600 pixels high. For a content page header, this might be slightly smaller at around 300 pixels. 

If a users browser is 1200 pixels wide and you've set your page header to 600 pixels high, your header will be displayed in a 1200x600 pixel area. Still with me?

If the user's browser is larger and 2500 pixels wide and the page header is still set to 600 pixels, your header will be displayed in a 2500x600 pixel area. 

These are 2 quite different sizes and our image needs to work well on both. We need to make sure our image has enough width to work on the 2500 widescreen whilst keeping anything important within the middle 1200 pixels as anything outside this width is at risk of being cut off on smaller screens. 

So with this in mind, we recommend creating header images that are 2500 pixels wide and approx 600-1000 pixels high (depending on your header height), remembering anything outside the middle 1200 pixels may be cropped off on smaller screens. 

What makes a good image?

This actually depends on what content is going in your header. The majority of the time you’ll have some text and possibly buttons within your header. Ideally, you don't want your text and buttons to overlay anything important in your image. This is especially important if you feature people in your image. You don’t want a button or text covering someone's face.

The best images for headers containing text and buttons will;

• Allow text and buttons to be displayed clearly
• Have the main focus of the image to one side
• Wide enough to allow for high-resolution monitors.  
• Keep the main focus of the image within the middle 1200 pixels of the image. This will make sure it doesn't get cut off on smaller screens. 
• Be easily scaled outwards. Having clear space around the focus point of the image. 

Let's take a look at some examples. 

Example 1: Background image no text overlay. Here's our image we've uploaded. It's 2500x900 pixels.

If the header were displayed on a 1024 pixel wide resolution screen. You can see the people on the left and right-hand sides have been cropped out.

Our header on a 2500 pixel wide resolution screen. You can see now because the browser has more width we can see our missing people.

Example 2: This ticks all the boxes for a great header image. Clear space around our hero couple. Buttons and text in clear space. Easily scalable colours left and right of the couple if we need to extend the image for extreme landscape resolutions.

Uploaded background image:

Header at 1400 pixel wide resolution:

 
Header at 2500 pixel wide resolution:

Example 3: If you aren’t featuring people (faces or hero shots) and it’s more of a textured background then it’s going to be a lot easier to place your text within the header.

Because the logo is part of the image it will scale with the header as seen below. This will always be problematic across different resolutions. Try and avoid having flattened images like this example. Separate the logo and the background into 2 separate images. Upload the separated background image as your header background image and insert the logo into the header content area. This will allow the logo to float on top of the background and be responsive.

Finally

You may not always be able to see what this looks like on a larger screen as you have a smaller monitor but knowing you’ve set the width and height to account for all screens will safeguard your header designs. You can always drop us a support ticket and we can double-check them for you!

So in summary...

Try and use

• Images that have clear space around people or backgrounds that can easily be scaled to create extra space
• Landscape images. 16:9 ratio. The wider usually the better!

Try and avoid

• Cropping people on larger resolutions. Try and keep everyone's head on the screen :)
• Critical content falling outside the main 1200 pixel wide viewing area
• Using text as images within the header
• Uploading very large images. If you upload an image straight from a stock photo and don’t resize it’s going to be a large file weight which will affect your page load time.

What about mobile?

All the same rules apply to mobile. However mobile header resolution is generally more portrait in ratio compared to landscape on desktop and the ratio doesn't vary nearly as much. We suggest creating your headers at approx 1000 pixels wide and 1400 pixels high depending on the look you are after for your header. By default your desktop header will work on mobile. You can however upload custom mobile headers.

And that’s it. I hope this will help you create those beautiful image headers and remember.

If you’d like further help please pop in a support ticket from your Funraisin admin and our team will assist you.