What is the size for Title Page background?

A lot of you have asked this questions, often when you have tryed to put an image containing text or something that can't be cropped.

The easier and quick reply to provide is that a defined size for the title page background CANNOT EXIST.

Let's try to elaborate it.

Why a defined size can't exists?

The most important cause is that the image is displayed in a container with a fluid width (the width of the window) and a fixed height.

There are some different heights depending on the window size, but they are always fixed, the title bar doesn't keep the height of the image itself, otherwise it would be a mess, imagine every page with a different size for title bar and imagine that you need to change the height of the image file every time you want change the height of the title bar.

This is not smart at all, so this mean: there will always be a vertical portion of the image not visible on certain devices.

Parallax effect

If the previous problem would be not enough, I would add that the title bar come with a parallax effect, this mean that, considering the logical of the parallax effect, the new definition is: there will always be a vertical portion of the image not visible on certain devices AND depending on the scrolling position of the page.

If you want reduce this issue, you can removing the parallax effect. You can do it using the code below and play with the background position (more information about background position here):

#featuredbox .featured-background {
    background-attachment: inherit;
    background-position: center center;

Put the code in the style.css of your child theme or in the theme settings:


The conclusion is that doesn't exists a perfect size for everyone and for every need, that allow to show the full image on every display.

We can only suggest you what should be a better size, big enough for the parallax and almost all screen.

Our suggestion is to try to keep a ratio not below the 1:3, so use an image with at least 1920px, in order to be large enough for almost every device, and height at least 600px.