[Support request] Featured Image bottom -50%

[René]

Hello, how can I put the featured image down by 50%? Of course, it also has to be responsive. Here is a photo of what it should look like.

[David]

Hi there,

can i see your site where you want to make this change ?

[René]

This is a customer project and cannot give you access data. So that the sidebar starts after the top section, I created the section as a hook (after_header).

https://staging-hausbaufirma-staging.kinsta.cloud/holzhaus/

[David]

Simple solution would be to:

1. Move the dynamic image into its own top level container, that sits below the current hero.
2. Then add hard stop 50% / 50% black and white gradient as its background.

See here:

This method means there is no negative margins that will adjusting for responsiveness. And the 50% gradient will always be 50%. So the fake overlap will be consistent on any screen size.

[René]

Great idea, worked. Many Thanks. Now I have to get the orange shape in the background right. But maybe I could solve that with position absolute and relative.

[David]

I was kind of ignoring the Orange shape as that really throws a spanner in the works lol
The only alternative is to use negative margins on the Image block, but its virtually impossible to do -50% of the Images height. You could do -300px but a % is not going to work…. hmmm

[Author]

Posts