• 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 10.0k 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 @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
            • 2 / 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