• 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.

Adding background Image

Scheduled Pinned Locked Moved Development
6 Posts 4 Posters 14.0k Views 3 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.
  • M Offline
    matrixfox
    last edited by Mar 9, 2018, 6:50 PM

    Good Afternoon everyone,

    I’m trying to add a background image to my MagicMirror via the css/custom.css file.
    I had the image saved into “home/pi/MagicMirror/css/background.jpeg”.

    The command I’ve tried is,

    body {
    background-image: url(“home/pi/MagicMirror/css/background.jpeg”);
    }

    But it hasn’t worked.
    I saw there was a previous thread on this but it was 2+ years ago, figured I’d get a few more looks at it this way.

    Thanks in advance.

    M B 2 Replies Last reply Mar 9, 2018, 10:42 PM Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @matrixfox
      last edited by Mykle1 Mar 9, 2018, 10:46 PM Mar 9, 2018, 10:42 PM

      @matrixfox

      I’m not familiar with doing that through css but if you are interested, this module will do the trick without css manipulation.

      https://github.com/mykle1/MMM-EasyBack

      However, if I were to guess, I would try the url like this, without the home/pi. Forgive me if that is incorrect.

      MagicMirror/css/background.jpeg

      Create a working config
      How to add modules

      J 1 Reply Last reply Apr 1, 2020, 11:03 AM Reply Quote 2
      • B Offline
        broberg Project Sponsor @matrixfox
        last edited by Mar 10, 2018, 6:01 AM

        @matrixfox

        If the image is in the css folder you don’t specify the entire path (you could but if it’s in the same folder just use the file directly)

        It should look like :

        body {
        background-image: url("background.jpeg");
        }
        

        And make sure you are using the correct tags " and not ”

        1 Reply Last reply Reply Quote 0
        • M Offline
          matrixfox
          last edited by Mar 12, 2018, 5:54 PM

          Thank you! Both viable solutions.

          1 Reply Last reply Reply Quote 0
          • J Offline
            j.ason @Mykle1
            last edited by sdetweil Apr 1, 2020, 12:07 PM Apr 1, 2020, 11:03 AM

            @Mykle1 Hi there,

            Thought the idea of adding my own desktop background image to my Pi would be awesome… Came across you module and thought I would give it a go…

            Got to modules and ran gitclone
            Dropped an image into the EasyBack module folder as instructed
            Copied the config.js options however now get config error

            I am only interested (at this time) for a desktop image to appear rather than the use of the video part so when I used the entry I did leave the video part and YouTube part as “” - hope that is correct? Or am I to remove the videoName & youTubeID parts completely?

            {		
            			module: "MMM-EasyBack",
            			position: "fullscreen_below",
            			config: {
            			    bgName: "NHS.jpg",
            			    videoName: "",
            			    youTubeID: "",
            			    height: "1080px",
            			    width" "1920px",	
            		}
            
            		},
            

            Any ideas would be gratefully welcomed…

            Thanks in advance

            J

            M 1 Reply Last reply Apr 1, 2020, 9:00 PM Reply Quote 0
            • M Offline
              Mykle1 Project Sponsor Module Developer @j.ason
              last edited by Apr 1, 2020, 9:00 PM

              @j-ason

              I answered you in your other post.

              Create a working config
              How to add modules

              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