Search code examples
javahtmlcssswingjeditorpane

Text over an image inside a JEditorPane


Is there any way to add an image with a text overlaying it in a JEditorPane?

The following mark-up that was supposed to work:

<html>
<head>

<div width='150' height='150' style='position: relative;'>
  <img src='img_snow_wide.jpg' style='width: 100%; height: 100%; object-fit: cover;' />
  <div style='position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'>
    BLAH
  </div>
</div>

</body>
</html> 

Does not work when used as the text of the JEditorPane (type "text/html").


Solution

  • While camickr is (mostly - Swing HTML rendering supports a sub-set of HTML 3.2) correct, it is the limited support for CSS letting you down here.

    This HTML/CSS works.

    String html = 
            "<html>"
            + "<body>"
            + "<div style='width: 370px; height: 220px; color: white; "
            + "background-image: url(https://i.sstatic.net/lxthA.jpg);'>"
            + "<p style='text-align: center;'>Observatory Silhouette!</p>"
            + "</div>"
            + "</body>"
            + "</html>";
    

    enter image description here