Support » Plugins and Hacks » [Resolved] Adding an Image Overlay as a Custom Style

[Resolved] Adding an Image Overlay as a Custom Style

  • I’m trying to create a style that a client can select in the dropdown TinyMCE WordPress visual editor which will overlay a transparent png onto a selected image.

    The png has a scuffed border, so I essentially need to overlay this border png onto an existing photo/image.

    This is easy enough for me to do having the two images (both the picture and the png border) in two separate divs and then putting one on top of the other, with different z-indexes.

    However, I’d like to create a style which will effect this so the client can do it as she pleases, and no matter what I try, I can’t get the png to appear!

    Here’s the style I’ve applied to the image in the drop-down:

    .roughedges {
    background-image: url(‘/wp-content/uploads/2013/09/edges.png’);
    width: 210px;
    height: 157px;
    z-index: 10;

    No cigar. The png won’t show.

    Any ideas???


Viewing 1 replies (of 1 total)
  • Plugin Author Andrew Ozz


    WordPress Dev

    Think the problem is that when editing a post, the background image url has to be relative to wp-admin, so needs “../”. Or you can use absolute url in all cases.

Viewing 1 replies (of 1 total)
  • The topic ‘[Resolved] Adding an Image Overlay as a Custom Style’ is closed to new replies.