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.

    Trying to add a background picture, {Body} doesnt work

    Scheduled Pinned Locked Moved Troubleshooting
    7 Posts 4 Posters 3.6k Views 3 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.
    • O Offline
      oscarkindberg
      last edited by

      Hi!

      Im trying the code:

      body {
      background-image: url(“paper.gif”);
      background-color: #cccccc;
      }

      Can’t get it to work tho, kinda new to this.
      I want a faded out picture behind the mirror, so my plan is to choose an image and then place a layer of grey over with aprox 50-60% transparency

      Any takers?

      strawberry 3.141S W 2 Replies Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @oscarkindberg
        last edited by

        @oscarkindberg did you place the paper.gif file in the css directory?

        Please create a github issue if you need help, so I can keep track

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

          @oscarkindberg You will not be able to float the layer of grey over top. The background services do not support layering. I had tried multi layers for background images and had to make a single background image myself in Gimp to make it work.

          O 1 Reply Last reply Reply Quote 1
          • O Offline
            oscarkindberg
            last edited by

            Thanks!
            No I wasn’t embarrassing enough haha.

            Got it right now tho!

            1 Reply Last reply Reply Quote 0
            • O Offline
              oscarkindberg @Wedee
              last edited by

              @Wedee I realised that after several tries and errors. I work in photoshop on a daily basis and I think in layers so to speak.

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

                @oscarkindberg

                Yes I fully understand, but in html you can layer exactly like you are thinking, but the tools used by Magic Mirror do not support it yet. I spent several hours thinking I was formatting it wrong until I realized this.

                brobergB 1 Reply Last reply Reply Quote 0
                • brobergB Offline
                  broberg Project Sponsor @Wedee
                  last edited by

                  @Wedee Works for me, z-index and opacity does the layering just fine,

                  @oscarkindberg
                  But unless you want the fade to be animated it should be made directly in the image, easier for the raspberry to process.

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