Community Forums › Forums › Archived Forums › General Discussion › Header image is not transparent and shows white box around
- This topic has 10 replies, 2 voices, and was last updated 9 years, 8 months ago by Belinda.
-
AuthorPosts
-
August 12, 2014 at 9:30 pm #118497BelindaParticipant
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??
August 13, 2014 at 6:47 am #118538AnitaKeymasterPlease share a link to your website so we can see what you have.
Love coffee, chocolate and my Bella!
August 13, 2014 at 6:53 am #118539BelindaParticipantAugust 13, 2014 at 7:07 am #118544AnitaKeymasterFirst, 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?
Love coffee, chocolate and my Bella!
August 13, 2014 at 7:08 am #118546AnitaKeymasterI had to correct the code I added there so please come to the website and review the code instead of viewing via your email.
Love coffee, chocolate and my Bella!
August 13, 2014 at 7:27 am #118556BelindaParticipantI have put the code into the style.css. I uploaded it by the Appearances > Header area.
August 13, 2014 at 7:30 am #118558BelindaParticipantWhen 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.
August 13, 2014 at 7:51 am #118562AnitaKeymasterOn 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.
Love coffee, chocolate and my Bella!
August 14, 2014 at 4:40 am #118740BelindaParticipantI'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.
August 14, 2014 at 6:23 am #118756AnitaKeymasterYour 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.
Love coffee, chocolate and my Bella!
August 19, 2014 at 7:37 am #119755BelindaParticipantI 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.