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;

[sdetweil]

@piki yes,
you should be able to use the developers window to add that to test out

select the body element and add in top right

[piki]

I copied it directly into custom .css…but it still doesn’t work

[sdetweil]

@piki can you show the custom.css entry

[piki]

body {
background-image : uurl(‘http://localhost:8080/sku.jpg.’);
background-size: cover;

}

[sdetweil]

@piki said in custom.css ......body???:

uurl

only url

[piki]

I fixed it, but the image still doesn’t appear

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

}

[sdetweil]

@piki and if you open the developers window, elements tab , select the body element

is the css selected
and are there any errors? (in the console tab)

[sdetweil]

@piki said in custom.css ......body???:

/sku.jpg.');

you also have a trailing . in the image name, ‘jpg.’

[piki]

Failed to load resource: the server responded with a status of 404 (Not found) sku.jpg.:1

[sdetweil]

@piki still the trailing comma
but, I tested here, needs to be in a subfolder of MagicMirror, config worked