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

Trouble getting Background Image to Show

Scheduled Pinned Locked Moved Custom CSS
27 Posts 2 Posters 6.1k Views 2 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.
  • A Offline
    ankonaskiff17 @sdetweil
    last edited by Aug 10, 2021, 11:38 PM

    @sdetweil Right at the top just below html. The way I understand is that it will load html first, then body. My html is an abbreviated version of main.css html

    custom.css

    Screenshot 2021-08-10 custom.jpg

    main.css

    Screenshot 2021-08-10 main.jpg

    S 1 Reply Last reply Aug 10, 2021, 11:44 PM Reply Quote 0
    • S Away
      sdetweil @ankonaskiff17
      last edited by Aug 10, 2021, 11:44 PM

      @ankonaskiff17 body supercedes
      html.

      u should look in the developers window, elements tab to see the actual css tree

      ctrl-shift-i, select elements tab.

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      A 1 Reply Last reply Aug 11, 2021, 12:19 AM Reply Quote 0
      • A Offline
        ankonaskiff17 @sdetweil
        last edited by Aug 11, 2021, 12:19 AM

        @sdetweil I’ve been doing that.

        Screenshot 2021-08-10 201817.jpg

        S 1 Reply Last reply Aug 11, 2021, 12:57 AM Reply Quote 0
        • S Away
          sdetweil @ankonaskiff17
          last edited by sdetweil Aug 11, 2021, 12:57 AM Aug 11, 2021, 12:57 AM

          @ankonaskiff17 so u can turn off things with a click in front. so disable the background color

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          A 1 Reply Last reply Aug 11, 2021, 5:00 PM Reply Quote 0
          • A Offline
            ankonaskiff17 @sdetweil
            last edited by Aug 11, 2021, 5:00 PM

            @sdetweil I’ve wrestled with this all morning and exhausted every combination I could imagine, I decided to try sticking a color in as shown below. Not sure if anything can be inferred if it will accept a background color but not a background image. I am ignorant of the vagaries of js but is it possible that background: var(--color-background); in is locking me i n to only color options since the default is set in

            :root {
            --background-color #000
            }
            
            body {
            background: red;
            }
            
            S 2 Replies Last reply Aug 11, 2021, 5:03 PM Reply Quote 0
            • S Away
              sdetweil @ankonaskiff17
              last edited by Aug 11, 2021, 5:03 PM

              @ankonaskiff17 possibly… disable it in the dev window… uncheck it… right side, near the bottom (that is closest to main.css while top is closest to latest css.

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @ankonaskiff17
                last edited by sdetweil Aug 11, 2021, 5:16 PM Aug 11, 2021, 5:15 PM

                @ankonaskiff17 so I added a body with a background image, using the MM web server in my custom.css

                body { 
                  background-image: url("http://localhost:8090/modules/images/testimage.jpg")
                }
                
                

                and then started MM
                and got
                Screenshot at 2021-08-11 12-09-23.jpg

                u can see the two body clauses on the right, top is custom.css (if u hover over the name it tells u where it came from)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                A 1 Reply Last reply Aug 11, 2021, 7:09 PM Reply Quote 0
                • S Away
                  sdetweil
                  last edited by Aug 11, 2021, 5:22 PM

                  then I added a root entry to custom.css

                  root: {
                    background-color: black;
                  }
                  
                  html {
                  /*  cursor: none; */
                  }
                  
                  body { 
                    background-image: url("http://localhost:8090/modules/images/testimage.jpg")
                  }
                  

                  and got
                  Screenshot at 2021-08-11 12-18-23.jpg

                  notice border around pic

                  then turned it off in the dev window

                  Screenshot at 2021-08-11 12-18-39.jpg

                  border gone

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil
                    last edited by Aug 11, 2021, 5:25 PM

                    same results with

                    root: {
                      --background-color: black;
                    }
                    
                    html {
                    /*  cursor: none; */
                    }
                    
                    body { 
                      background-image: url("http://localhost:8090/modules/images/testimage.jpg")
                    }
                    

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • S Away
                      sdetweil
                      last edited by Aug 11, 2021, 5:42 PM

                      using file:// does NOT work

                      body { 
                        background-image: url("file:///home/sam/MagicMirror/modules/images/testimage.jpg")
                      }
                      

                      even tho it works in chrome

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 2 / 3
                      2 / 3
                      • First post
                        11/27
                        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