I don’t know if it can be done using css

Well now I know. Thanks @j-e-f-f

That information would have been really useful 2 days ago! hahaha

Here’s an example:

.MMM-SomeModule header:before {
  content: url('path/to/your/image.png');
}

By default, :before will put the image at the start of the header text, :after will put it at the end. But like anything, you can position things however you desire.

For example, this rule will size the image to 16px X 16px, and position it at the top and 30px from the right edge of the header element.

.MMM-SomeModule header {
  position: relative;  /* any absolutely positioned children will be relative to this element */
}

.MMM-SomeModule header:before {
  content: url('path/to/your/image.png');
  display: block;
  width: 16px;
  height: 16px;

  /*
    These rules allow you to position the image anywhere you want in the header
  */
  position: absolute;
  right: 30px;
  top: 0px;
}

Can you put an image in a module header?

I don’t know if it can be done using css but a module certainly can be coded to have an image in the header.

I had meant to do this sooner but I was working on something else. I stripped down my MMM-EyeCandy module (it’s still available) and made this for you or anyone that might want to use it.

Basically, you disable the standard header on a module and use this instead. Just install it and make your entry in the config above the module you want to use it with. The css file provided allows you to size and position the ImageHeader any way and anywhere you like.

https://github.com/mykle1/MMM-ImageHeader