Full screen header pic

Unite Theme
1

Dear support team,
is it possible to fill the complete header area with a logo picture instead of only 450 px picture?
I found the topic where you sent the site.branding code, but it doesn’t fill the header area over the menu completely, although the header logo is 3000 px.

Thanks in advance.
Tobias

2

Hi Tobias

Please provide URL of the website, link to the image and reference screenshot of how you want it, I will try to help with custom css

3

Hello dear ladies and gentlemen,

My website is: Tobis Notenarchiv

https://tobis-notenarchiv.de/wp/wp-content/uploads/2021/08/bild1.jpg and Bild2.jpg (sorry, only 2 links possible).

Bild1 shows how it looks at the moment, wenn I use the code:
#logo img {
max-width: 100%;
}

Bild 2 shows how it should look like, so that the header picture fills the space above the menu.

I hope the pictures explain, what I need.

Best regards
Tobias

4

Hi Tobias

Try this css code:

header#masthead {
    background-image: url(https://tobis-notenarchiv.de/wp/wp-content/uploads/2021/08/bild1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
5

I’m sorry, but it doesnt work, there is still a white space on the right and left, although the picture is more than 2500 pixels wide.

6

Hi

Well, if you want to cover entier header use this code instead:

.container.header-area{
background-image: url(https://tobis-notenarchiv.de/wp/wp-content/uploads/2021/08/bild1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
7

I’m sorry, but it doesn’t work. The header pic does’nt fill the header area on the right and left side.

8

Hi

Yes, lets make some changes, try this code instead:

.container.header-area {
    background-image: url(http://tobis-notenarchiv.de/wp/wp-content/uploads/2021/08/tests.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
9

Perfect!!! It works. Thanks a lot for your patience and your help!

10

Thank you too and have a nice weekend :slight_smile: