Archived topic
Background image settings
7 replies · Started by Erika on January 4, 2023
Hi there,
the merging container...
I´d like to have the first container with an image and two container on the right side, below each other and vertically aligned in the middle of the outer conatiner with the image background. Basically simple and I thought I did it right, but
1) I do not get the inner grid vertically align the two inner container and
2) the image does not behave I´d like to. Ideally it would fill the container, the upper part of the image always visable (top center?), width:auto
3) when I resize the window, everything shifts strange, I get a white padding instead of merging of the image
Probably simple, but I do not find where I got the settings wrong. Sorry, in two hours searching I couldn´t find anything in the forum or else :( so I have to ask.
Thanks, Erika
Hi Erika,
Any chance you can send us a mockup of what you are looking for?
For question 2, the background image size is set to contain, try using cover instead.
Hi Ying,
see link in the private information with a picture.
I tried cover as setting, but still can not set the image to 100% height.
Thank you :)
Erika
Hi there,
the main issue is related to the Merged Header and the extra large top and bottom padding that is applied to that Container Block.
I would recommend disabling the Merged header and we can use some CSS to allow just the navigation element to merge.
That way you can edit the hero container block and:
1) remove the top and bottom padding
2) set a minimum height
3) set its vertical alignment to center.
Try making those changes and let me know so i can take a look at the necessary CSS for the merging.
Hi David,
just to clarify: at the moment, the block element is part of the front page and not a page hero element hooked after the navigation.
You want me to create a page hero and display it on the frontpage after_navigation?
Currently I designed another header for tablet and mobile. If I create a page hero, can I display that on the front page desktop only? With classes, the same way I do with a block on a page?
Thanks, Erika
I was just calling it a page-hero :) No need to change how it is added, you can leave it on the front page.
Hi there,
I did the steps and even styled for a merging effect :) Thank you.
Erika
Looks great :)