Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Background Image in Header too wide

Home Forums Support Background Image in Header too wide

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #139273
    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

    #139417
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #140332
    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

    #140375
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.