Background image affected by Margins

[A Former User]

@Wedee you mean, you want your background Image to cover whole screen but your modules should be with some spaces from edge of image?

margin:0;
padding:40px;

Try this.

[Wedee]

@Sean Just tried it again. That does pull the image to the top left but cuts it off at bottom and right. As well the magic mirror content gets pulled to all 4 edges meaning there is zero space between edge of monitor and start of text.

The margin zero got the image to the edge, but padding 40 did not affect the content text.

[A Former User]

@Wedee you should change the height and width values also,
And if you want your img automatically stretching or covering area, use background-size:cover.

[A Former User]

@Wedee and I think padding will not be affected because of region containers are not static positioning; so you can adjust each module location by giving margin to them.
hmmm. I’m not in front of my machine now, so I cannot give you real code. Sorry.

[Wedee]

@Sean Thanks - Ya its not quite working… I am still playing with it. I can get the formatting I want for the content, but the background does not behave how i think it should. Its not a repeating background its something I made at 1920x1080 size. Used to work back several MM versions ago, but it broke and I just turned it off as I could live with the solid black. New application and I really wanted to get a background on it again.

Keep on playing with it and I might solve it.

Thanks for the ideas.

[A Former User]

@Wedee how about using some modules for that? There are already many wallpaper or background modules.

[Wedee]

@Sean Will have to look at that. Haven’t really looked at all the new modules as everything I needed was all set.

[shashank]

hi, use MMM-Profilepicture module, it will show full screen picture
{
module: “MMM-Profilepicture”,
position: “fullscreen_below”,
classes: “default everyone”,
config: {
// See below for configurable options
url: “http://192.168.0.107:8080/MMM-Imagesphotos/photo/1.jpg”
}
},

[Wedee]

@Sean @shashank Many thanks for the idea and info regarding the module. While it’s not running as a custom.css it does the job exactly as I required.

[pyrosmiley]

In case anyone else is coming into this thread looking for answers, I’ve been stumped on this same problem for awhile and think I got it working (instead of trying to put a picture, I wanted a CSS gradient in the background for various reasons).

What I’ve been running into is this: if I put my desired background: info in the body { } portion of the CSS file, it fills up the middle part, but the margins are white. If I put it in the html { } portion, I can make a nice border that fills the margins, but now the inside isn’t covered.

After looking through the main.css file (and running enough attempts to lock myself out of the fitbit API), I appear to have gotten it by adding my background: under .region.fullscreen.below. Not knowing how CSS works, I of course only recently figured out that this has to be outside the body{} designation that comes standard in the custom.css file. The code looks kind of like this:

body {	
}

.region.fullscreen.below {
  background: linear-gradient(208deg, #235182, #196586);
}

Hope this helps anyone else.