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?

35 Comments

  1. 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 🙂

  2. sabrina

    Hi Phil,
    I’m not sure if i’m doing something wrong but none of my parallaxed images show correctly on anything but desktop, it comes up blurred and really zoomed in so you cannot even make out the image on both mobile and ipads, any help would be really appreciated.
    thanks,
    sabrina

    1. Phil (pipdig)

      Hi Sabrina, I think this may be related to a bug with iOS Safari and image scrolling. I’ll see if we can apply a workaround to the next update, until the bug is fixed at their end.

  3. 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.

  4. Nikita

    Hey! Is it possible to put more than one parallax image in a post? When I try it just shows the code on the 2nd full width image as opposed to the image itself.

    1. Phil (pipdig)

      It should work, so this might be an issue with the formatting in the second shortcode. You may wish to copy the first shortcode text, then replace the image source to make sure they are both formatted in a the same way.

          1. Nikita

            I took out the code that wasn’t working to publish, as I couldn’t have code just sitting there.
            If I admit back in now, can you look within 10 mins?

            1. Phil (pipdig)

              You could copy the contents of that post into a new page. Then it won’t impact your blog and won’t be visible to people. You can then just send me the link here and delete the page after I’ve had a look.

              1. Nikita

                I just figured out what it is! It for some reason doesn’t show in the preview – it just shows the code.
                But when you publish it works. Odd.

                1. Phil (pipdig)

                  Ah ok! Hmmm, yeah that is a bit strange. It should show in the preview. There might be a plugin on your site impacting that somehow.

  5. sabrina

    Hi Phil,
    Is there any way to make the height of the image slightly less than 600px?
    Thanks,
    Sabrina

  6. 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”

  7. Shannon

    Hi Phil,
    I am trying to get this to work, but every time I upload an image to use it resizes it to 1000px (by whatever) so when I put the link in the picture is super stretched. I tried using the original size short code, but then the image is completely off center. Any help would be much appreciated!

    Thank you,
    Shannon

    1. Phil (pipdig)

      Hi Shannon, please could you upload your shortcode to http://www.pastebin.com and send me the link? I’ll give it a try on our test site and see if I can suggest anything.

        1. Phil (pipdig)

          Do you have any plugins installed on your site that might be resizing the image? I’m guessing there might be a plugin which is automatically downsizing the images at upload.

  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.

    1. Phil (pipdig)

      Hi Elien, what is the shortcode that you are currently using? Would you be able to copy that over to pastebin.com send me the link so I can take a look?

        1. Phil (pipdig)

          Thanks! I just tried adding your shortcode to another site and it seems to work for me. Would you be able to send me a link to the post/page that you’ve added this to?

          1. Elien

            Hi Phil!

            It seems to work right now! 🙂
            I added the shortcode to my post without putting it on pastebin. Would that have been the reason? I’m not an expert haha… 🙂

            1. Phil (pipdig)

              Hmm, I’m not sure what might have happened! I’m glad it’s working now though 🙂

  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).

  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. It will not be shown publicly.