Background image doesn't actually fill hero div

Hi everyone, I’m looking to have this blurred background image fill the entire Hero Image / Cat div like this.

When I look at this page on my tablet in landscape mode, though, the image is shifted up to only cover a fraction of the div.

How can I make it cover the whole div on all devices?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@winterdrake rather than adding a div with a background image, just set the background image on the section :slight_smile:.
Make sure to duplicate the class ‘hero section’ you’re using, otherwise all your sections will have this background applied :slight_smile: .

@winterdrake I was going to suggest the same thing that @sarahfrison mentioned earlier. Also, the reason that your image doesn’t reach the top is because you have height set to 80 vh, change it to 100vh and it will cover its entire container. I hope this helps.

I was following a tutorial on how to do blurred backgrounds, and they suggested nesting a div with the blurred background inside your content div. If I just set the background and blur effect to the main section, then the text and content gets blurred too! :frowning:

Each of the blocks on my website are 80vh tall, setting the image to be 100vh makes it stretch outside the bounds of that “block” of the website, and into the next block.

@winterdrake if that is the case then use 100% height for your image instead of 100vh. That way it will cover the whole container that is covering 80vh of the screen.

Okay, weirdly, setting the Hero Image to 100% height made it also go outside the bounding box of its parent. You can see where the image goes below the border of the hero section. I guess webflow doesn’t work how I thought it does, I thought doing 100% would make it 100% the height of the parent element.

I was able to fix this using another recommendation I saw on the forums where I set the parent’s position to be relative and the child’s to be absolute.

Im glad you found a solution. Another way to accomplish what you wanted is to set the background image on your parent container and then add the blur effect with the designer’s effects section at the bottom, it works just the way you had it.

1 Like