Making Transparent header image in “Twenty Ten” theme

• 

  djdopestar · Member · Jan 6, 2011 at 7:41 pm

  • Copy link
  • Add topic to favorites

  I am trying to make the header image transparent within my site. If you view my site you can see that my header has an image of my “Dj Dopestar” logo. However, this header has a black background. I want the image to be transparent and only the letters to show

  I followed the recommendations within this thread:
  http://wordpress.org/support/topic/need-help-with-transparent-custom-header-image

  I changed the css coding to the folliwing:

  #wrapper {
  margin-top: 0px;
  background: #fff; –>I removed this
  padding: 0 0px;
  }

  #main {
  background: #fff; –>I added this
  overflow: hidden;
  padding: 40px 0 0 0;
  }

  However, despite these changes, whenever I upload my image there still seems to be a black background! I would really appreciate any help because this is very annoying! I am getting a new Dj Logo designed and I want to resolve this soon so I can finish designing my site!

  Thanks,
  Dj Dopestar

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 6, 2011 at 9:19 pm

  • Copy link

  We need a link to the blog that you are talking about. Are you talking about this one http://djdopestar.wordpress.com/ ?

  If so, the image itself has a black background. You have to create an image with a transparent background. It will have to be done as a PNG instead of a JPG though.

• 

  djdopestar · Member · Jan 7, 2011 at 4:03 am

  • Copy link

  Yes that is the link to the blog that I am talking about..sorry for not posting it..
  However, I swear that the image I uploaded was a 16 bit png file..I dont understand why whenever I upload it to wordpress it had a black background!

• 

  thesacredpath · Member · Jan 7, 2011 at 4:07 am

  • Copy link

  Are you sizing the image to the exact size your theme needs before uploading it or are you cropping it in the header upload process? Size it ahead of time to the exact size, make sure it is a transparent background and save as a PNG and then upload it.

  This is the image URL that is there now: http://djdopestar.files.wordpress.com/2011/01/cropped-dopestarlogo16bit1.jpg .

• 

  thesacredpath · Member · Jan 7, 2011 at 4:12 am

  • Copy link

  Since you have the CSS upgrade, if the above does not work, upload the image to the media library, get the URL of that image and the put it into the CSS directly as below.

  #branding img {
   background: url("URL_of_image") no-repeat scroll 0 0 transparent;
  }

• 

  djdopestar · Member · Jan 7, 2011 at 4:13 am

  • Copy link

  Hey I will try resizing it to the exact size and re-saving it with those preferences..hopefully that works :

• 

  thesacredpath · Member · Jan 7, 2011 at 4:14 am

  • Copy link

  It could be that the header cropping feature automatically goes JPG when it saves the cropped image. That is all I can thing of.

• 

  djdopestar · Member · Jan 7, 2011 at 5:14 am

  • Copy link

  thanks I think that I fixed it..If you look at my blog do you kno how I can erase above my logo where it says “Dj Dopestar and for the love of music”??

• 

  thesacredpath · Member · Jan 7, 2011 at 5:46 am

  • Copy link

  Yep, I think you have it. For the site title and site description do the following.

  #site-title, #site-description {
  display: none;
  }

• 

  panaghiotisadam · Member · Jan 7, 2011 at 6:33 am

  • Copy link

  @Rich: Yes, “all cropped images will be converted to jpegs”.
  ( http://en.support.wordpress.com/themes/custom-header-image/#uploading-a-custom-header-image )

• 

  thesacredpath · Member · Jan 7, 2011 at 7:00 am

  • Copy link

  @Panos, thanks for verifying that. I figured that was the issue.

• 

  panaghiotisadam · Member · Jan 7, 2011 at 7:42 am

  • Copy link

  You’re welcome!
  Off-topic: could you check this please?

• 

  thesacredpath · Member · Jan 7, 2011 at 8:09 am

  • Copy link

  @Panos, just responded there.