Making Transparent header image in “Twenty Ten” theme

  • Author
  • #553925


    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:

    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!

    Dj Dopestar

    The blog I need help with is


    We need a link to the blog that you are talking about. Are you talking about this one ?

    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.



    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!


    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: .


    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;


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


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



    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”??


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

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

    @rich: Yes, “all cropped images will be converted to jpegs”.
    ( )


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


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


    @panos, just responded there.

The topic ‘Making Transparent header image in “Twenty Ten” theme’ is closed to new replies.