• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.
  • K Offline
    Knox
    last edited by Oct 11, 2016, 7:18 PM

    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.

    S 1 Reply Last reply Oct 11, 2016, 7:28 PM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @Knox
      last edited by Oct 11, 2016, 7:28 PM

      @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
      • K Offline
        Knox
        last edited by Oct 11, 2016, 8:53 PM

        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
        1 / 1
        • First post
          2/3
          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