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 30.7k 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 Anachor

      Hello!

      i wanna add a background picture instead of the black background color but no command works in the custom css. I made a folder call images, add the command to the css (backgroud-image: url (…images/image.jpg)) but the screen become white and no picture…

      Any solution ?

      1 Reply Last reply Reply Quote 0
      • Wilco89W Offline
        Wilco89
        last edited by paviro

        body {
            background-image: url("paper.gif");
            background-color: #cccccc;
        }
        

        like this?

        (how do I post it as code?)

        paviroP I 2 Replies Last reply Reply Quote 0
        • 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
                        • 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