Add a background image

Anachor

Thanks for everything! :blush:

ostfilinchen

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

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

ostfilinchen

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

bhepler

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

ostfilinchen

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

JoeSpencer

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

schwarzbaer

@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")));

jaymichael78

Is there a way to have multiple background-images to slideshow? I have lots of html/jquery/css workarounds but wanted to see if anyone had a good magic mirror hack?

I_Am_Anthony

@Wilco89 I know this thread is old, but maybe you can help. Do you know how to change the background picture based on time of day? I have seen modules that update by a random interval, but looking for specific time.

I’m making a MM for a friend. I’m going to have a background image on it, but I want it to change to the scary girl from The Ring late at night. Should be a nice surprise for him…

Thanks.