MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Loading an image properly

    Scheduled Pinned Locked Moved Troubleshooting
    3 Posts 2 Posters 2.6k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • KnoxK Offline
      Knox
      last edited by

      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.

      strawberry 3.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @Knox
        last edited by

        @Knox

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

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 1
        • KnoxK Offline
          Knox
          last edited by

          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' height='186' width='341'>"
          			}
          		} ,
          
          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy