TinyMCE Advanced
[resolved] Adding an Image Overlay as a Custom Style (2 posts)

  1. foresme
    Posted 2 years ago #

    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???


  2. Andrew Ozz
    WordPress Dev
    Plugin Author

    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TinyMCE Advanced
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic