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.



  • @Knox

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


  • 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" />"
    			}
    		} ,
    

Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.