• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.5k 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.
  • ? Offline
    A Former User @Wedee
    last edited by Sep 2, 2017, 9:50 PM

    @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 Sep 2, 2017, 9:55 PM Reply Quote 0
    • W Offline
      Wedee @Guest
      last edited by Sep 2, 2017, 9:55 PM

      @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 Sep 2, 2017, 9:57 PM Reply Quote 0
      • ? Offline
        A Former User @Wedee
        last edited by A Former User Sep 2, 2017, 9:59 PM Sep 2, 2017, 9:57 PM

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

        W 1 Reply Last reply Sep 2, 2017, 9:58 PM Reply Quote 0
        • W Offline
          Wedee @Guest
          last edited by Sep 2, 2017, 9:58 PM

          @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 Sep 3, 2017, 1:18 PM

            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 Sep 3, 2017, 7:19 PM

              @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
              • P Offline
                pyrosmiley
                last edited by Sep 20, 2017, 6:20 AM

                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.

                1 Reply Last reply Reply Quote 2
                • P Offline
                  prysme01
                  last edited by Jan 15, 2018, 11:32 AM

                  thanks It helps me !

                  1 Reply Last reply Reply Quote 1
                  • 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