Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Making Transparent header image in "Twenty Ten" theme

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

  2. thesacredpath
    Member

    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.

  3. 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!

  4. thesacredpath
    Member

    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 .

  5. thesacredpath
    Member

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

  6. djdopestar
    Member

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

  7. thesacredpath
    Member

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

  8. 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"??

  9. thesacredpath
    Member

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

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

  10. panaghiotisadam
    Member

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

  11. thesacredpath
    Member

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

  12. panaghiotisadam
    Member

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

  13. thesacredpath
    Member

    @Panos, just responded there.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags