3. Loading an image properly
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Loading an image properly


  • I’m sure this shouldn’t be this hard but I’ve been stuck on it a few hours now. I’m trying to load a transparent background .png with a white image into the mirror.

    I’ve tried loading it as a background img through the custom.css file, which worked except its in the background… (obviously)
    body {
    background-image: url(White.png");
    background-repeat: no-repeat;
    [/code]

    So to get around the manual padding adjustment I’m wondering if there is a way to load in an img into the “Position: top_left” area so any modules also in that area auto adjust?

    I also tried adding to the index.html but that simply resulted in an “X” broken link icon.

    0 1 Reply

  • @Knox

    {
			module: "helloworld",
			position: "top_left",
			config: {
				text: "<img src="path_or_link_to_your_image" />"
			}
		}
    1

  • Thanks for your help strawberry pi.

    I was having additional issues with the code finding the img.
    In case this helps someone else, this is what I ended up with:

    {
			module: 'helloworld',
			position: 'top_left',
			config: {
				text: "<img src="./config/White.png" />"
			}
		} ,
    0