WordPress: Full Width Banner Images

Looking for a full width post slider or carousel? Please see this guide instead.

All of our themes come with the option of displaying full width banner images within post/page content. This image will span the full width of the screen from left to right. Click here for an example of this feature (scroll down until you see the image which is full width across the screen).

Please note, this feature will not work when the sidebar is enabled. You can read more about disabling the sidebar on this page.

You can add a banner image to any post/page by using the shortcode below:

You should replace the IMAGE-SOURCE-HERE text with the full path to the image. For example:

The shortcode above is what has been used to create the banner on this example.

You should use an image which is 2048 pixels wide for best results. If you use an image which is too small, it will look blurry on larger screens.

Image Size

By default, the image will be displayed in a banner section which is 600px high. If you would prefer to show the full sized image in its original size, just add size="original" like the example below:

You can also change height of the image by setting the "size" as a number. For example, to set the image as 800px high, you would use size="800" as shown below:

Parallax Effect

It is also possible to display the image with a parallax effect. To enable this, simply add parallax="yes" to the shortcode, as shown below:

Was this article helpful?