When it comes to website design, the header image (also known as a “hero image”) is one of the most important elements. It's usually located at the top of the page, but its position can vary depending on the latest design trends. The header image is intended to be used as a background image only and does not have any alternative text fields, meaning it cannot be used to convey information. For optimal results, it is recommended to use images with a resolution of 1920 x 1080 pixels for backgrounds. Smaller images won't work as they will be distorted on higher-resolution monitors.
For parallax templates that use full-width rotating banners that cover the entire page, you should aim for an image size of 1920 x 1080, but the height can be flexible depending on how dramatic you want the parallax scrolling effect to be. The larger the image, the less visible it will be and the smaller the image, the more obvious the parallax scrolling effect in the banner will be. For traditional templates that have rotating banners on the home page, or if you want to create a scrollable header on another page, you should use images with a resolution of 1900 x 646 pixels (recommended) or 950 x 323 pixels to ensure they are not distorted. If you're using a larger image, you can open it in the Sidekick graphic editor to crop it to the appropriate dimensions for that banner. In addition to these specific areas, you can use images of almost any size on your website and they will be resized to fit the area where you're inserting them.
As a general rule, we don't recommend uploading images larger than 1920 x 1080 pixels anywhere on your website as no area requires an image larger than this and larger images may not load correctly or cause slower page load times. For more information, check out our comparison table of banner options by template or watch our video example of how to add each banner option. To learn more about which templates support page banners, visit Banner options by template. Some items in the collection display page banners too - for example, a blog post can display the blog page header. To find out which templates are compatible with collection item banners, visit Banner Options by Template. Both dotCMS page resources and article entries have a header image field that allows a large header image to be placed in the background at the top of the page.
Banner images should be designed according to the required dimensions and compressed into a small file size.
