[Resolved] Header image, width

[Uwe Pfeifer]

Hi. I’m trying to get a header image displayed so it resizes to the endusers screen. if i select 100% widtht hough, it makes a white area below the background picture, before the menu. if i set to auto the logo on the right is not displayed to people but instead the image is cut off.

how can i make the picture resize but not produce this white area between menu and header?

thank you, freaky.

[Tom]

Are you using a background image to display the logo etc..? If so, that’s not really the recommended usage of background images.

Background images are typically used for patterns or images that can be cut off a bit without hurting the design.

For displaying logos, it’s much better to display them as static images over top of the background image. That way, they will always display no matter what.

Let me know if you need more info 🙂

[Uwe Pfeifer]

I’m trying to get someone to make a logo. I’ve done it the way you suggest now. http://www.gw2-togo.de
The problem is, we cant make a good logo lol I hope it will look well. The logo isn’t put up yet. It’s still in the making.

Thank you for your help :).

[Uwe Pfeifer]

ok is t here a possibility to put the logo to the left on the header? because i dont want a huge special area for just the logo like what happens when i set something as site logo.

[Tom]

This may help: https://generatepress.com/forums/topic/logo-next-to-site-title/#post-118692

[Uwe Pfeifer]

It didn’t help. I added this to CSS:

/* Logo next to site title */
.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
}

The result is this: http://imgur.com/3rUVJOe – so like before.

[Tom]

That logo looks pretty huge – what happens when you size it down considerably?

[Uwe Pfeifer]

it looks like this now: http://imgur.com/PHENv1c

[Tom]

Getting there.

How about a little smaller?

Then I would set your header background image size to “Cover” (in the Customizer).

Then you can push your site title/tagline down a bit with this CSS:

.site-branding {
      margin-top: 20px;
}

Adjust the pixels as necessary.

[Uwe Pfeifer]

i wont add a logo. i dont like the background getting that high/big.

thank you for your help 🙂

[Tom]

No problem 🙂

[Author]

Posts