[Resolved] Background Image in Header too wide

[Simon]

Hello,

how can I adjust the size of the background header of my hompeage?

I would need the header to be the same width as the body of the homepage. whats the easiest way to do that? just bought GP Premium, so should be possible to adjust 😀

and another question. how can I change the header background image just for one page? so that I have the same image for all the pages but not for one other?

here is the link to my homepage.

http://www.klushundzunft.at

cheers,
SOAP

[Tom]

Hi there,

Background images can be tricky, and are usually used for patterns/large images that will look good even if certain areas aren’t shown.

They aren’t really designed to display logos/text etc..

In this case, I would set your header background color to the red, and then input the logo with a transparent background into the Header widget area in “Appearance > Widgets”.

This would give you a consistent look on desktop and mobile, and would always show your logo (while adding it as a background won’t).

To change the header background on individual pages, you’ll need to know the page ID of the page.

For example, if your page ID is 10, you could do this in CSS:

.page-id-10 .site-header {
      background-image: url('URL TO YOUR BACKGROUND IMAGE');
}

Let me know if you need more info 🙂

[Simon]

Hey,

how can I add a “transparent background”?

If I go to appearance – widgets and want to add one I can’t find anything like “transparent background”… but only widgets from other plugins I activated.

And would it be possible to take the width of the background color in the header to the same width as the main page has? to let the rest to the left and to the right be white again?

Cheers,
SOAP

[Tom]

Hi there,

1. Are you trying to make your widgets have a transparent background? If so, go to “Customize > Colors > Sidebar Widget Colors” and remove the value from the Background field.

2. Go to “Customize > Layout” and change the “Header Layout” to “Contained”.

Let me know if you need more info 🙂

[Author]

Posts