transparent bg header image

  • rnsrobot

    (@rnsrobot)


    13 years, 2 months ago

    Hello, I am trying to use a header image that has a transparent background in .png format. It does not show up with the transparent bg, inserting a block bg color. I’m playing around with CSS in colors.css and styles.css but can’t seem to find the right spot, or insert the right code to make this work.

    http://www.ryanlockemusic.com (I will edit if I can resolve myself)

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 2 months ago

    Use a browser developer tool for these kinds of CSS exploratory queries.
    I used Google Chrome’s built-in developer tool and discovered the parent <div> of your header has a background colour [screenshot].

    Solutions
    This means you either have to remove the background colour on this parenting div and re-apply it to all other elements that you still want it to affect. Or you’ll have to move your header out of its parent div, so it is no longer contained and constrained by the white background colour style.

    The first solution may require a lot of CSS changes; applying the white background to a lot of HTML elements.

    The second solution will require a Child Theme. You’ll have to copy the theme’s header.php file into your Child Theme directory and then modify that.

    Remember, you should never edit the theme’s files because you’ll only (well, that’s one reason) lose your changes when the theme updates. To avoid this, use a Custom CSS Manager plugin (for CSS-only changes) or a Child Theme (for CSS and all other changes).

    Thread Starter rnsrobot

    (@rnsrobot)

    13 years, 2 months ago

    Thanks. I was editing the css for the header, not the wrapper. I see what you are saying – changing #fff to ‘transparent’ also changes the bg color for the entire content. I’m still experimenting. This theme has a dashboard editor to install the header images. The new problem I’m running into is figuring out how to edit the height of the header. I cannot seem to find the css code vs the output (exploring page in chrome developer) in either styles.css or colors.css. I can’t imagine I’d need to edit the .js for the header to do so. I’m sure it’ll turn up. Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘transparent bg header image’ is closed to new replies.