WordPress: Full Width Banner Images

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?

30 Comments

  1. Ro

    Hi there — is this shortcode responsive for mobile? It looks great on desktop but ideally I’d also want it to adjust to the correct width for mobile size, when viewing on a phone. Thank you!

    1. Phil (pipdig)

      Hi Ro, the image should adapt to smaller screens. Would you be able to send me a link to a post/page showing the shortcode on your site?

  2. EVANTHIA MEIMARI

    Hello! I have the blossom theme preview three. My problem is that the image on the slider is not centered where I want. Neither the little one under the slider. How can I do that?

    1. Phil (pipdig)

      Hi Evanthia, it is best to select an image which does not require a specific section to be displayed. For example, an image which does not include text. You can read more about that in this guide and this guide.

      You can also select a different image to use in the “Full Width Slider” via the options at the bottom of the post editing screen.

      You may wish to change the shape of the images on the homepage via the setting at the bottom of the “Post Layout Options” tab in the Customizer too. Your images are currently landscape, however the images shown on the homepage are in portrait.

  3. katherine bellman

    Is there a way to overlay text on the full banner?

    1. Phil (pipdig)

      Hi Katherine, not currently, thought this is a feature which will be coming to WordPress within the next few months. We’re just waiting on a core update from the WordPress team (news to follow).

  4. Amelia

    Hi there, is there any way at all to have the side bar with the parralex image working on the header? As I’ve seen tht em sheldon (emtalks.com) who uses your themes has both of those? Thanks Amelia

    1. Phil (pipdig)

      Hi Amelia, the “Full Width Slider” feature that comes with many of our themes can include this parallax effect. Which theme are you currently using on your site?

      1. Amelia

        Hi Phil, it’s Aruba nights and yes it has a check box for parallax but even when I press it, it doesn’t work. I do have a side bar on all my pages but I’ve seen other bloggers using pipdig have a parallax full width slider as well as using a side bar on thy page so I was wondering how I do both as well? Thanks Amelia

        1. Phil (pipdig)

          It’s worth noting that the information on this page doesn’t relate to the Full Width Slider. It is just for when you want to add a banner image to a post/page. Where would you like to display the image on your site?

          1. Amelia

            Yes sorry that’s what I meant! And just under the title!thanks amelia

            1. Phil (pipdig)

              No problem! It should be possible to enable that via the “Full Width Slider” section of the Customizer. Does it work if you enable it from there?

                1. Phil (pipdig)

                  Thanks for confirming. Which aspect of it doesn’t work? The more information you can provide will help me to check why it is not working on your site.

  5. Elin

    Hi Phil. For some reason this shortcode isn’t working for me. I added it to the text side of my post but it only shows the code when I preview the post and the image doesn’t show up. Is there anything I’m doing wrong? 🙂

    1. Phil (pipdig)

      Hi Elin, it looks like you have added the banner image to your most recent post now. Were you able to get it working? Let me know if not 🙂

  6. Jacob

    Hey, is it possible to make parallax images the original size? They appear to be the banner size? I tried just adding the size=”original” code and it wasn’t working

    1. Phil (pipdig)

      Hi Jacob, that’s not possible at the moment, but we will be adding an option so that you can set the height of the image. So instead of setting the height as “original” you could increase it to a larger number such as “900” if you wanted to. This would mean that the image can be parallax and larger than the default size. This will be available in version 3.3.0 of the “pipdig Power Pack”, which will be available either later today or tomorrow.

  7. Cathrin

    Hi,

    thank you for the shortcode. Is it also possible, to add more than one picture (e.g., 5-7 smaller pictures) which then in total cover the full width of the screen from left to right?
    Can I use a shortcode for this as well?
    Thanks for your help!

    Cathrin

    1. Phil (pipdig)

      Hi Cathrin, this is possible by editing the images into a single image file. For example, you could create an image which was made up from 5 separate images using something like https://www.photojoiner.net (I’ve not tried this particular site before though). After you’ve created the single image, you could use it in the shortcode.

      1. Cathrin

        Hi Phil, thank you so much for your help and you fast response. Perfectly worked! You find the result here http://www.itsworthy.de. Is it also the add a link to the shot code? So that clicking on the picture leads you to a new side? Cheers, Cathrin

        1. Phil (pipdig)

          Glad it worked! You can set a link by adding a “link” option to the shortcode. For example – link=”https://www.google.com”

  8. Elien

    Hi Phil! Somehow this one isn’t working for me. I’m not an expert and I just added it to the ‘text’ side of my post. 🙂 Isn’t this the right way to do it?

    Thanks! You guys rock.

  9. Kaylea

    Hi,

    What would the height be? The width of 2048 pixels works perfectly but I cannot work out the height.

    Thanks in advance.

    1. Phil (pipdig)

      Sorry for the delay, your comment was marked as spam for some reason!

      The height can stick to any relative division of 2048. For example, if it were a standard landscape image from your camera the height will probably be something around 1500 pixels high (though it will probably vary).

      1. Mikkel

        Will the 1500 px height allow for the parallax scrolling to work, but have the advantage of “trimming” the unnecessary pixels to cut down on website storage?

        1. Phil (pipdig)

          Hi Mikkel, setting the height won’t impact the image file size. The full image is still loaded, however the top and bottom are cropped visually. The full image will still need to be loaded so that it works nicely on large screens.

  10. Lucy

    Hi,
    Just came across this short code, however I’m a little confused about the IMAGE-SOURCE-HERE part, would you be able to tell me where to find this/ what to put there please.

    Many thanks,
    Lucy x

    1. Phil (pipdig)

      Hi Lucy, after uploading an image to your Media Library you can copy the source to the image file. For example, I’ve created a shortocde you could use which will display one of your images at https://pastebin.com/raw/5FCGBqGL

Leave a comment


The link to your website will be visible to support staff only and will not be shown publicly.
If you do not yet have a website, simply enter "none" in the box.