Header image is not transparent and shows white box around

[Belinda]

The header image I created with a transparent background is showing up in my focus pro WP site with a white box around it. It doesn't matter what file format I've tried I'm still seeing the white box so it's not blending into the background diagonal lines in the theme.

Does anyone have any suggestions on what I'm doing wrong and how to fix it??

[AnitaC]

Please share a link to your website so we can see what you have.

---

Need help with customization or troubleshooting? Reach out to me.

[Belinda]

http://www.thetraininglady.com

[AnitaC]

First, the logo I see here is not transparent. I pulled it to my desktop and it has a white background.

In the CSS look for .site-title a and you can make the background transparent:

.site-title a {
          background: transparent;
}

Did you upload the header via the functions.php file or the Appearance > Header?

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

I had to correct the code I added there so please come to the website and review the code instead of viewing via your email.

---

Need help with customization or troubleshooting? Reach out to me.

[Belinda]

I have put the code into the style.css. I uploaded it by the Appearances > Header area.

[Belinda]

When i created the graphic I create a new blank image with transparent background and it was showing as transparent in the program I used but once I saved it any of the saved versions had white background.

[AnitaC]

On the code I provided you - you added that to here and now when you hover the logo it disappears:

.site-title a, .site-title a:hover {
    background: none repeat scroll 0 0 transparent !important;
    color: #244c5f;
}

Remove that background line because on the hover the logo disappears. Make the logo transparent so it can be uploaded again.

For the header background: change the #ffffff to transparent.

.site-header .wrap {
    background: url("images/lines.png") repeat scroll 0 0 / 6px 6px #ffffff;
    margin-bottom: 5px;
    padding: 30px 60px;
}

Then once you upload your transparent logo your should be fine.

---

Need help with customization or troubleshooting? Reach out to me.

[Belinda]

I'm not sure what I'm doing wrong but it didn't work. I replaced the #fff with transparent and uploaded the image again and the header area turned into a shade of blue and still had the white box around the logo. Very frustrating.

[AnitaC]

Your initial request was this:

The header image I created with a transparent background is showing up in my focus pro WP site with a white box around it. It doesn’t matter what file format I’ve tried I’m still seeing the white box so it’s not blending into the background diagonal lines in the theme.

If you remove the white background and make it transparent, will see the blueish diagonal lines which is what you said you wanted your logo to "blend" with. So that's what you are seeing.

When I remove the #fff white background, I see what you see - http://awesomescreenshot.com/09a3bb6t30. Your logo is NOT transparent so that's why it will not blend in - http://thetraininglady.com/wp-content/uploads/2014/08/banner-500-180-transparent.png.

Once the image is transparent, it will blend in.

---

Need help with customization or troubleshooting? Reach out to me.

[Belinda]

I must be doing something wrong then when I create the image as it says it has a transparent background but it looks as though it is turning white when I save the image.

[Author]

Posts