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.
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.
For each header: W: 100%, H: 40vh
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.
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.
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 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.
)
