Image background is white, needs to be transparent

  • Author
    Posts
  • #1142460

    edaciouspod
    Member

    I have an Etsy symbol at the top of my page. It appears round and transparent in lightroom, but is boxed with a white background on my blog page. How can I change this? I know VERY little about CSS…thanks! p.s.It’s a .png file…

    The blog I need help with is edaciousbooks.com.

    #1142696

    What you would have to do is to edit and change the image file to a PNG with a transparent background. It isn’t something that can be done with CSS because the white area is defined, and part of, the image file itself.

    #1142699

    edaciouspod
    Member

    I did this already. The image file is a .png with a transparent background. The box is transparent in Lightroom, but when I upload it to the blog template (Grisaille) it shows up as white….help!

    #1142700

    Ah, I see what you mean. It appeared to be part of the image.

    .image-3 img {
    background: none !important;
    border: none !important;
    }
    #1142737

    edaciouspod
    Member

    Thank you so much! Now since I’m a CSS newb :)… my image has an URL which connects it to my media library. Where do I place this URL in your code. It is this:

    Thanks again, huge help! :) :) :)

    #1142754

    The code I gave was just to get rid of the white background and the border on the image. The image URL would be put into the text widget just as you did before.

    #1142761

    edaciouspod
    Member

    Okay forgive my ignorance :/

    I placed the code as you typed it in the stylesheet and it didn’t do anything. Did I do it wrong? Thanks for your patience :)

    #1142762

    edaciouspod
    Member

    Actually, I take that back LOL It turned all the headers in the sidebar white where before they were gray (“Edacious? Get Updates?” and “Categories” etc….)

    #1142763

    edaciouspod
    Member

    Gak! How do I change it back? :(

    #1142786

    I see that you reverted the last change you made by putting the CSS in a comment on your Appearance → Custom Design → CSS page.

    A comment is surrounded by /* and */

    /* This is a CSS comment */

    I don’t see the Etsy image in your sidebar right now, and the image you linked to before isn’t working for me so it seems you might have deleted it?
    http://edaciousbooks.files.wordpress.com/2013/01/etsy1.png

    If you add it back and reply back here, I’d be happy to help you take another look at this.

    Great header image btw! I love it.

    #1142787

    edaciouspod
    Member

    Thanks so much! On vaca this week let me take another look at it when I get back. Thanks for the help!

    #1142795

    edaciouspod
    Member

    @designsimply, we’re back from skiing and I’m ready to tackle this again. The image url is this:

    the url it appears on is this:
    http://edaciousbooks.com

    As you can see, a white box STILL appears around it, as well as the other two buttons I put, one of them designed at the Instagram site! Gah! Is there any way to remove the white boxes and make them transparent? I’m starting to think it’s a design feature of this template :/ I’ve got them on another site (link below) and they appear just fine, no boxes……….HELP!

    http://thedinerofcville.com

    #1142797

    This will remove the background color and border from images in the sidebar of the Grisaille theme:

    #secondary-content img {
    	background: none;
    	border: none;
    }

    Or if you would like to apply that change only to the text widgets, use this instead:

    #secondary-content .textwidget img {
    	background: none;
    	border: none;
    }

    You should add the CSS code to your Appearance → Custom Design → CSS editor and replace the default comment there the first time you edit.

    #1142798

    edaciouspod
    Member

    God bless you that worked! Wheeeeeeeeeeee! :D THANK YOU!

    #1142799

    edaciouspod
    Member

    Sorry for the delay, we were sick as dogs all week then lost power b/c of the storm….thanks again!

The topic ‘Image background is white, needs to be transparent’ is closed to new replies.