MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Background image affected by Margins

    Scheduled Pinned Locked Moved Development
    12 Posts 5 Posters 9.3k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W Offline
      Wedee
      last edited by

      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;
      }
      
      ? 1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User @Wedee
        last edited by

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

        W 1 Reply Last reply Reply Quote 0
        • W Offline
          Wedee @Guest
          last edited by

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

          ? 2 Replies Last reply Reply Quote 0
          • ? Offline
            A Former User @Wedee
            last edited by 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.

            1 Reply Last reply Reply Quote 0
            • ? Offline
              A Former User @Wedee
              last edited by

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

              W 1 Reply Last reply Reply Quote 0
              • W Offline
                Wedee @Guest
                last edited by

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

                ? 1 Reply Last reply Reply Quote 0
                • ? Offline
                  A Former User @Wedee
                  last edited by A Former User

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

                  W 1 Reply Last reply Reply Quote 0
                  • W Offline
                    Wedee @Guest
                    last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • S Offline
                      shashank
                      last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • W Offline
                        Wedee
                        last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy