background image in modernapp login

Hey Guys.

First of all I wanted to thank everybody for the great job and idea of creating this all.

if anyone still need, I found a way to override the styling of the login page without rebuilding the whole webapp.

I setup a custom.css in my assets folder.

added the below into index.html

    < link rel="preload" as="image" href="/background.jpg" />
    < link rel="stylesheet" type="text/css" href="/assets/custom.css?<?php echo filemtime('/assets/custom.css'); ?>" / >

custom.css

.muiltr-xzhep0 {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('/background.jpg') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Targeting next subclass for the login window */
.muiltr-xzhep0  >  * {
    position: relative;
    background-color: rgba(60, 60, 60, 0.7);
    border-radius: 25px;
}

So far this works good for me. Hope that helps.

hi RwebZ

i try to use you code but dont work for me

cane you post compleet index.html

Check that your class is actually called muiltr-xzhep0, might be dynamic + clear browser cach

Hi Rwebz,

i have traccar 6.5 running and have 2 time class look at index.html how to fix the background image

   div id="root" class="root"
   div class="loader"

Don't look in the html file. inspect your website as you open different pages, in chrome, right click on the website, then click inspect. Looks for classes in the code.

Tanx for the info Rwebz its working oke!

it also works but only behind the login fields the left side remains the same it is also possible to use the background for the entire page