• 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.

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • The topic ‘How to add a div only if image exists in post’ is closed to new replies.