Streaming live at 10am (PST)

Positioning of hero image at top of page


I searched for topic that matched this problem and I couldn’t find one.

I have a problem with hero images on every blog page. No matter what size image I upload blog main image field or how I position it in the settings controls or the style controls it either is positioned too high, too low or just tiles. It is worse on monitor, and looks ok on tablet. Any changes I make to the blog hero obviously screws up the other blog images. It’s never worked. The thumbnail images for each of the blog posts are also positioned incorrectly.

The home page image is fine.

Any thoughts are helpful

Here is my site Read-Only:

(how to share your site Read-Only link)

Okay can you explain which page is the issue? On the home page which link to click, and from there?? Just gives us all better description on where.

Every blog page. It seems to be a universal issue on the site. Here is a bad one. It cuts off, doesn’t fit no matter how I size it:

It is a blog post on the front page called “the end” but all of the blog post headers do similar things.

Oh yeah I see, it’s pulling the image from the cms. Because this size will override and add it as a background image. Okay, delete the image from hero section, and add an image element inside.

  1. For each header: W: 100%, H: 40vh
  2. Inside the header, add an image element, then get it from the cms: W: 100%, H: 100%

This will do what you want. However, the scaling will still effect the image because it’s a JPEG. Use png or svg.

Will give that a shot. Previously if I changed one of the blog posts, they all changed, which sort of makes sense as the image perametres were pulling from CMS. However if I turn off the take from blog post selection that might work. I am going to try that now and will let you know.


Oh yeah that will work, but you’ll still need a PNG or SVG if you plan to scale.

But you’ll still be bound by a background image, which doesn’t have Webflow’s auto responsiveness. In this case, use the MAIN IMAGE in the cms. But in the Designer, as the hero, add an image element instead of a div. Just set the width to 100%, and lock the height to 30vh or something. You can use pixels as well and test the scaling.

Try using a section, then add image element inside. Then bind the image to the cms field. Then you can size appropriately.

Thanks Gary,

I’m a bit thick here. Vh?

I am not getting the setting the main image on the CMS and using an over riding hero image. What I am doing is not working - Setting the main hero image on the blog page AND also trying to alter the main hero on the post.

Sorry, a bit new.

Oh sorry - VH is viewport height. It will expand the size of the viewport of the screen size the user is on; which is device specific. But it’s the whole viewing screen.

I did it in the video. Did you watch it? I can do another and send it to your email to watch if you need? Send a message to my profile, inside your account, not out on the forum.

I can also do a Join Me screenshare for you view.

Hi Gary,

I did watch the video quite a few times. Is there supposed to be a long pause in the middle of it? I am going to try again this evening. I couldn’t get things to work quite like you did. I may need to do a screenshare when you are available this or next week, let me know.

Okay sure, I’ll be available anytime, just shoot me a message. It’s only a few steps and you’ll get it.

  1. Hero Blog: Remove the image from the cms binded.
  2. Remove all those unnecessary styles: Only TYPE in W: 100vw, H: 100% (I forgot to add width :wink:)

  1. Drop in an “Image Element” in the Hero Blog layer.
  2. Now add 100% to width and height. Remember, here you’ll need a PNG or SVG, otherwise you’ll get distortion upon scaling down to tablet and mobile.
  3. Now you can resize with auto-responsiveness.

Holler at me if you need anything else. See ya!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.