Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

PNG images have borders and white background, how to remove

Hi,

I have png images in my site which <strong>should be</strong> without background and without any borders. I have made them with Photoshop and made sure that I used png-24 and ticked the transparency option. What is wrong here? This is driving me nuts! How do I remove these borders and make the background transparent?

http://raccoonbox.com/sitedata/ota-yhteytta/

I'm using wordpress 4.1 and Canvas theme.

4 Answers

Cisco Rendon
PLUS
Cisco Rendon
Courses Plus Student 37,546 Points
Cisco Rendon
Cisco Rendon
Courses Plus Student 37,546 Points

The problem is in the container design layout. There must be a setting there that you must over ride or remove. Depending on what browser you are using, high light the image. right click then go to the inspector element or development tool. It will bring up the coding and you will immediately find out where the problem is. Hope you are able to fix it, good luck on your design.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Found it!!! 

/* 3.2 Images */
.entry img, img.thumbnail, #portfolio .group.portfolio-img img {
  height: auto;
  padding: 3px;
  border: 1px solid #e6e6e6;
  background: #F8F8F8;
  background: rgba(255, 255, 255, 0.7); }

It was in parent css some line that sets image background to #F8F8F8;. I wonder how did it get there. I should check the Canvas appearance settings. Thank you so much!

The problem is now gone with command:

img,
.entry img,
img.thumbnail, 
#portfolio .group.portfolio-img img {
  border: none;
  background: none;

Thank you so much!

Ashley Franklin
Ashley Franklin
17,633 Points
Ashley Franklin
Ashley Franklin
17,633 Points

Heyo! Some custom css will do the trick, if you take a look at the css that's already there you'll see that those images are getting borders because .entry img has a border set, so there's nothing wrong with the actual images you've saved :)

Konstantin Nikkari
Konstantin Nikkari
5,185 Points
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Ou! I need to dig into parent Canvas theme style.css file and look my answer there?

Well I made this rule which removed the borders

img,
.entry img,
img.thumbnail, 
#portfolio .group.portfolio-img img {
  border: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  -webkit-box-shadow: none;
}

And I also have this in my Custom CSS Manager Plugin

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
 box-shadow: none;
}

Now I have to make a solution that the PNG's aren't transparent even thou they SHOULD be. Any ideas on that?

Cisco Rendon
Cisco Rendon
Courses Plus Student 37,546 Points
Cisco Rendon
Cisco Rendon
Courses Plus Student 37,546 Points

Konstantine,

Did you try loading copying the code into one of the "workspaces" work forms with just the images only? It is to check to see if the images load with a background or border.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Cisco,

I just tried it in Brackets program and PNG's are perfectly fine, transparent as they should be.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Transparency problem must be somewhere in the WordPress page code or how WP renders the images in the pages. RACCOONBOX logo at the top of the page is transparent but If I pull it with img src to the page the background becomes non-transparent.

Cisco Rendon
PLUS
Cisco Rendon
Courses Plus Student 37,546 Points
Cisco Rendon
Cisco Rendon
Courses Plus Student 37,546 Points

Glad you found it Konstantin, sometimes it is a needle in a haystack but since you were patient, you were able to find the problem. Just make a note somewhere on a pad, book, cell phone memo to record the solution in case you ever run into the problem again or someone else does. Good work and I wish you the best of luck with your website design.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

You are very kind. Keeping a memo seems to be a must as well as mozilla web developement tools ;). The way the tools show you all css comming to selected elements is simply beautiful.