Hi! I’ve been super impressed with the help I’ve received through this forum. Hopefully, you guys will be able to help me again with this tricky little issue.
I’m creating a blog post template that I want to pull in a header “hero image” at the top of the page. This hero image will be linked to the blog post category in the CMS. I’d like for this image to be responsive and take up about 50-60% vh and to stay in place (fixed) while the blog post description scrolls up the page.
I’ve tried a few different way of building this and either run into issues with the responsive design or with the image covering the footer of the page when scrolled all the way to the bottom of the post.
Any suggestions would be helpful! Thanks in advance.
Do you happen to have an example of what you’re looking to end up with? There are a few ways I’m interpreting it and they all differ a bit with how they’re done.
A mockup (Figma, XD, Sketch, etc) would be great but even a sketch will do
I just realized that the read only view isn’t pulling in the header hero image at all. So I’m uploading a video to show you what I’m seeing. Hopefully this helps.
The way it’s currently pulling into the designer view for the desktop version is how I want it to behave.
However, when I go to preview the desktop version the hero image blocks the footer or when I view any of the responsive designs the hero image isn’t behaving responsively (scaling to the VW) or just donesn’t show up at all (ex. in the vertical phone view).
The important thing to remember is that I’m pulling the image from a CMS item. I know how to get the photo to be responsive when adding a background image to a div, but I’m having trouble getting an image element (so I can link it to the CMS) to behave the same way.
Please let me know if I can provided other resources to help
