Background image affected by Margins

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

[prysme01]

thanks It helps me !