Making Transparent header image in “Twenty Ten” theme

  • Author
    Posts
  • #553925

    djdopestar
    Member

    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 djdopestar.wordpress.com.

    #554242

    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.

    #554368

    djdopestar
    Member

    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!

    #554369

    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 .

    #554370

    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;
    }
    #554371

    djdopestar
    Member

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

    #554372

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

    #554383

    djdopestar
    Member

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

    #554386

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

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

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

    #554402

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

    #554408

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

    #554411

    @panos, just responded there.

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