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.

    Add a background image

    Scheduled Pinned Locked Moved Solved Development
    18 Posts 9 Posters 31.8k Views 13 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.
    • AnachorA Offline
      Anachor
      last edited by

      Works perfect! Thank you so much! Is it possible to add a video as background later or a webcam ?

      1 Reply Last reply Reply Quote 0
      • paviroP Offline
        paviro Admin @Wilco89
        last edited by

        @Wilco89 Check out https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code! :)

        We're all stories in the end. Just make it a good one, eh?

        – The Doctor

        1 Reply Last reply Reply Quote 0
        • AnachorA Offline
          Anachor
          last edited by

          Thanks for everything! :blush:

          1 Reply Last reply Reply Quote 0
          • O Offline
            ostfilinchen
            last edited by

            Hi all,

            i’ve made an Folder in /home/pi/MagicMirror calld Images and copy in this a file logo.jpeg.

            Next i changed the custom.css like this:
            body {
            background-Image: url(“/Images/logo.jpeg”);
            background-Color: #cccccc;
            }

            But nothing happens. No Error and no Backgroundimage. What’s wrong in the custom.css? Pls help me

            Regards
            Daniel

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

              @ostfilinchen background-Image: url("../Images/logo.jpeg");

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

              1 Reply Last reply Reply Quote 0
              • O Offline
                ostfilinchen
                last edited by

                @strawberry-3-141: that also doesn’t work :-(

                bheplerB 1 Reply Last reply Reply Quote 0
                • bheplerB Offline
                  bhepler Module Developer @ostfilinchen
                  last edited by

                  @ostfilinchen Try this one: background-Image: url("Images/logo.jpeg");

                  Double-check your capitalization on your path and your file name. That’s burned me more than a couple of times.

                  1 Reply Last reply Reply Quote 0
                  • O Offline
                    ostfilinchen
                    last edited by

                    i have moved the jpeg from Images to css. now it works. The Mirror doesn’t have access to the Folder Images…

                    S 1 Reply Last reply Reply Quote 0
                    • J Offline
                      JoeSpencer
                      last edited by

                      @Anachor Did you ever find out how to add a webcam as the background?

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        schwarzbaer @ostfilinchen
                        last edited by

                        @ostfilinchen Hi there,
                        I also wanted to add background images to my MM and came across your post. Although it is not very recent, I think it might be a good idea to add the following information:

                        if you want to have additional folders to be available within the Mirror, you need to specify those in the /js/server.js just after the other app.use commands, e.g. :

                        app.use("/Images",express.static(path.resolve(__dirname + "/../Images")));

                        1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 1 / 2
                        • 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