Trying to add a background picture, {Body} doesnt work

oscarkindberg

Hi!

Im trying the code:

body {
background-image: url(“paper.gif”);
background-color: #cccccc;
}

Can’t get it to work tho, kinda new to this.
I want a faded out picture behind the mirror, so my plan is to choose an image and then place a layer of grey over with aprox 50-60% transparency

Any takers?

strawberry 3.141

@oscarkindberg did you place the paper.gif file in the css directory?

Wedee

@oscarkindberg You will not be able to float the layer of grey over top. The background services do not support layering. I had tried multi layers for background images and had to make a single background image myself in Gimp to make it work.

oscarkindberg

Thanks!
No I wasn’t embarrassing enough haha.

Got it right now tho!

oscarkindberg

@Wedee I realised that after several tries and errors. I work in photoshop on a daily basis and I think in layers so to speak.

Wedee

@oscarkindberg

Yes I fully understand, but in html you can layer exactly like you are thinking, but the tools used by Magic Mirror do not support it yet. I spent several hours thinking I was formatting it wrong until I realized this.

broberg

@Wedee Works for me, z-index and opacity does the layering just fine,

@oscarkindberg
But unless you want the fade to be animated it should be made directly in the image, easier for the raspberry to process.