Hi everyone,
I am building a website with the BOOST Template. And my customer decided to have a title image on top of the website, which should fill the whole width of the browser window and which should cover the background of the

navigation row and part of the content as well.
For example like in the screenshot attached.
Any ideas?
Thanks in advance.
Best,
Kerstin

Hi Kerstin,

The image with the people in the doorway - right?

Cheers
Paul

Hi Paul,
yes, the image in the background with the people.
I insert a title image in position Top1 and adjusted the row style "full width" in the template.
Is there any option to enlarge the image to the complete width of the template?
Can I adjust the position Top1 in that way, that this image in Top1 position appears also as background image for the navigation row.

I add a screenshot of the website with a light red marked area. In this area I would like to have the image of top1.
There is such big gap between the image in top1 and the navigation row

. And my customer would be happy, if we can optimize this in a way, that the gap between the navigation and Top1 becomes smaller or the image in top1 overlaps the navigation in the background.

I hope you understand what i tried to explain?
Thanks for your support.
Kerstin

Can the image just be a background image e.g. not requiring a module?

Cheers
Paul

Hi Paul,
yes it can just be a background image - for me there is no need for a module.

Thanks,
Kerstin

Hi Kerstin,

Do you have a link for the site?

Cheers
Paul

Hi Paul,
yes, the link is buk2016.v4zehn.de

Thanks,
Kerstin

hmm was thinking about this - do you need the image to resize depending on the screensize?

No, I think resizing the image is not necessary.
I only need the possibility to put an image in the background reaching from the top row to the upper main content area.
Thanks for your support.

If you add a background to either the body or a particular row using custom.css and edit the image so it gradually blurs into the background - would that work for you?

Hi Paul,
I can try this. Can you tell me, how I can do that?
What is the code for the custom.css file?
Thanks, Kerstin

hmm

not sure this works for you

#zen-wrap {background: url("buk2016.v4zehn.de/images/Bayer_Kastner/Bilder/Titelbild1500x250px.jpg") no-repeat center 0;}

you would use a relative image url rather than absolute

Cheers
Paul