Image background is white, needs to be transparent
-
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: (visible only to logged in users)
-
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.
-
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!
-
Ah, I see what you mean. It appeared to be part of the image.
.image-3 img { background: none !important; border: none !important; } -
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! :) :) :)
-
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.
-
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 :)
-
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….)
-
-
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.pngIf 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.
-
Thanks so much! On vaca this week let me take another look at it when I get back. Thanks for the help!
-
@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.comAs 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!
-
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.
-
-
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.
WordPress.com Forums 