4. Background image affected by Margins
MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

Background image affected by Margins

  • W

    So I have added a background image and it is affected by my margins. Is there a different section (Other than Body) i should be placing the call? I ultimately would like my Background to fill full screen with the mirror content using the margins. I have messed with moving it to header and got an interesting result as well as messed with using padding vs margins. Thanks.

    body {
  background-image: url('ClassicBG.png');
  background-repeat: no-repeat;
  background-size: 1920;
  margin: 40px;
  position: absolute;
  height: calc (100% - 80px);
  width: calc (100% - 80px);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}
    0
    S
     1 Reply
  • S
    Module Developer

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

    0
    W
     1 Reply
  • W

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

    0
    S
     2 Replies
  • S
    Module Developer

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

    0
  • S
    Module Developer

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

    0
    W
     1 Reply
  • W

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

    0
    S
     1 Reply
  • S
    Module Developer

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

    0
    W
     1 Reply
  • W

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

    0
  • S

    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”
    }
    },

    0
  • W

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

    0