custom.css ......body???

piki

Re: CSS 101 - Getting started with CSS and understanding how CSS works

I can’t change the background to MagiMirror. I need to put one image (file) there that will be loaded from the SD card. I also changed through css…but none of it works. If I change only the color it works…but the photo from the file does not. I checked the path name of the address books…but it still doesn’t work. Isn’t it necessary to add something? Thanks for any advice.

sdetweil

@piki the MM webserver root is the MagicMirror folder, you cannot load anything from outside that folder tree thru the local server file:/// doesn’t work either

http://localhost:MM-port/

points to the MagicMirror folder

SO, you can make a LINK to the file into the MM folder

see the ln command
sudo ln -s source dest

source is where it is
dest is where you want it to appear

also, see the second link in my signature below, or using the developers window elements tab to check on the contents and play with/test styles on elements

piki

@sdetweil so via custom.css as I read it won’t work over time?

piki

or it won’t work only through custom .css?

sdetweil

@piki IF you make the file to appear (copy or link) IN the MM tree THEN you can make it work thru css only

the MM http server is configured ONLY for the MagicMirror tree and forward…
not just anywhere in the file system

piki

but in which line in the tree should I edit (configure) just write the path there…or?

sdetweil

@piki sorry, don’t understand the question

put your file in ~/MagicMirror

then your css url will be
http://localhost:mm_config_port (usually 8080)/filename(whatever the name of the file is in the MagicMirror folder)

http://localhost:8080/somefile.jpg
or whatever you call it

if you don’t want to copy it then

cd ~/MagicMirror
sudo ln -s /wherever_the_actual_file_is somefile.jpg

that will create a link for the file (from the booted sd card) to the MagicMirror folder
as somefile.jpg

you can name it whatever you want with whatever type it is: gif, png, jpg…

piki

sku.jpg (its my file) and is found in MagicMirror/sku.jpg

sdetweil

@piki so
http://localhost:8080/sku.jpg

piki

http://localhost:8080/sku.jpg

and should I enter that in custom .css?

body {
background-image : url('http://localhost:8080/sku.jpg.');
background-size: cover;