[resolved] Header NOT showing full screen image (5 posts)

  1. Tara
    Posted 3 years ago #

    I uploaded a photo that is 1900pixels wide:

    However, when it is used as the featured image, it does not display the entire photo. The edges are cut off and the picture is forced to upsize, greatly distorting the quality at a 1900pixel display. What am I doing wrong?


  2. Caroline Moore
    Posted 3 years ago #

    Howdy! This is because the current featured image is very long, but not very tall.

    You'll have the best results with an image that uses a 2.88:1 width-to-height ratio. The featured images we use on the demo site at superherodemo.wordpress.com are 2000px x 695px, to give you an example of a size that should look good.

    You're seeing lower quality because the featured image is displayed at 500px tall, which is greater than your uploaded image's height of 440px. Try uploading a featured image with a minimum height of 500px and I think you'll see a difference.

    I hope this helps!

  3. Tara
    Posted 3 years ago #

    Thanks. I really don't want the image to be any taller. I don't want it to take up such a large part of the viewing screen vertically. Is there a way to change the ratio because I want to use the image as I've already cropped it which is 1900 × 440?

  4. Tara
    Posted 3 years ago #

    I tried uploading a copy at 1900x550.

    Same thing happened. My photo is automatically cropped down to 1440x500 and it looks horrible. Even when I give it more height, it is still not displaying the photo correctly. Any suggestions?

  5. As you can see Line 66 in functions.php, The theme will crop the featured image in 1440x500.

    You can change the height value to suit your preference. After that regenerate thumbnails with this plugin. So that already uploaded images cropped with the new size.

    One thing to note though. Since the theme scales proportionally the featured image to fit the width of the browser screen, the height of the image will be vary depending on viewers' screen size. If you change the browser width, you'll see what I mean.

    Hope it helps!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.