WordPress.org

1. openingsound
   Member
   Posted 8 months ago #

   Hello,

   I am trying to add a design element onto the top of every image that is posted on my blog. This wouldn't be a problem, I tried just adding some extra padding to the top of each image and then adding the design element as a repeating background image. It works but adding the extra padding ruins the rounded corners that are applied with CSS to the image.

   Here is my CSS:

   .entry img {
           -moz-border-radius: 18px 18px 18px 18px;
           -webkit-border-radius: 18px 18px 18px 18px;
           -khtml-border-radius: 18px 18px 18px 18px;
           -o-border-radius: 18px 18px 18px 18px;
           border-radius: 18px 18px 18px 18px;
           background-image:url('images/slantedLine.png');
   	background-repeat:repeat-x;
   	padding-top:20px;
   }

   Here is a picture showing the rounded corners getting screwed up by padding:
   http://i.imgur.com/acrdI.png

   I'm pretty sure it isn't solvable with just css, or at least I can't figure it out. I think I need to write some php that checks if there are any images in the post and then if there are images in the post add a div element to the top of each of those images. After trying for 2 hours I have realized I just simply don't know how to do this.

   Any help at all pointing me in the right direction would be much appreciated.

2. Redefine
   Member
   Posted 8 months ago #

   If I were you I would opt for using jQuery to provide the fix.

   Have you tried adding a height to the CSS to see if the padding works?

   If the height fixes the issue you could create a simple jquery function that gets the height of the image and sets the CSS height to the image height.

Reply

You must log in to post.