Remove grey between image and image border

• 

  amaryshad · Member · Oct 25, 2014 at 4:45 am

  • Copy link
  • Add topic to favorites

  Hi,
  I see in the advanced options for editing images, there is the ability to remove the thin border that appears around images. Is there a way, however, to remove the grey “matting” that appears around the image when you hover over it with the cursor?

  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  rachelmcr · Member · Oct 25, 2014 at 5:45 pm

  • Copy link

  Hi there,

  You can remove that grey background using Custom CSS (part of your WordPress.com Premium plan). The exact CSS you’ll need varies based on what theme your site is using.

  You can find the CSS you need for your site’s Twenty Eleven theme in this post in the CSS Customization forum:

  https://en.forums.wordpress.com/topic/get-rid-of-photo-borders-in-twenty-eleven?replies=3#post-1257973

  You don’t need the first few lines of CSS code there (that’s for removing the image border). But the second part, starting with a:focus, removes that grey background when you hover on images.

  To add that custom CSS to your site, go to your My Sites page and click the Customize link under the site’s title. In the Customizer, open the CSS section and in the CSS editor there, you can paste in your custom CSS.

  Please let me know if you have any questions about that! You can also get more help with customizing your theme’s design from the expert staff and volunteers in the CSS Customization forum. :)

• 

  amaryshad · Member · Oct 26, 2014 at 1:36 am

  • Copy link

  Hi,
  Thanks so much for your reply.
  I used this CSS from the forum you linked to remove they grey hover borders:
  a:focus img[class*=”align”],
  a:hover img[class*=”align”],
  a:active img[class*=”align”],
  a:focus img[class*=”wp-image-“],
  a:hover img[class*=”wp-image-“],
  a:active img[class*=”wp-image-“],
  #content .gallery .gallery-icon a:focus img,
  #content .gallery .gallery-icon a:hover img,
  #content .gallery .gallery-icon a:active img {
  background: none;
  }

  As far as removing the thin grey border, I know it can be done manually with each image in the post editor as I stated earlier.

  Once this is all removed, however, the text does not align with the edges of the images, as if the images are indented a bit.

  Is there a way to either get the images to fill the space up to where the border used to be, or otherwise align the text flush with the image edges?

  I would need to have the text be able to align with all edges of the image, as some of them will be wrapped with text.

  I posted this question in the CSS customization forums as well.

  Thanks for your help thus far!

• 

  rachelmcr · Member · Oct 27, 2014 at 10:25 am

  • Copy link

  Hi there,

  I see one the volunteers replied to your thread in the CSS Customization forum:

  https://en.forums.wordpress.com/topic/align-text-with-image-edges-2011-theme?replies=2#post-2105773

  Please give that a try and see how it goes. :)

• 

  amaryshad · Member · Oct 27, 2014 at 7:11 pm

  • Copy link

  Yes, thanks so much! :-)