MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Adding background Image



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


  • Project Sponsor Module Developer

    @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


  • Project Sponsor

    @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 ”



  • Thank you! Both viable solutions.



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


  • Project Sponsor Module Developer

    @j-ason

    I answered you in your other post.


Log in to reply