Background modify

Can't you just set body background?

lambert7 years ago

release.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Traccar</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="background.css">
</head>
<body>
<div class="background-image"></div>
<script src="background.js" type="text/javascript"></script>
<div id="spinner"></div>
<div id="attribution">Powered by <a href="https://www.traccar.org/">Traccar GPS Tracking System</a></div>
<script id="loadScript" src="load.js"></script>
</body>
</html>

background.css :

@import "compass/css3";

@-webkit-keyframes fade-out {
  100%   { opacity: 0; }
  0% { opacity: 1; }
}

.background-image {
  background: url('background.jpg') no-repeat center center fixed;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  opacity: 0;
  
  -webkit-animation-name: fade-out;
  -webkit-animation-duration: 20s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 0;
}

background.js :

$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});

BLimo6 years ago

Hi Anton I seem to be having the same problem but I don't know where I am going wrong. I already uploaded the image "download.png"to the folder

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Borderless Tracking</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<body background="download.png">
<div id="spinner"></div>
<div id="attribution">Powered by <a href="https://www.borderlesstracking.com/">Borderless Tracking</a></div>
<script id="loadScript" mode=”debug” src="load.js"></script>
</body>
</html>

BLimo6 years ago

I also made some changes in the source code regarding fonts and font colours which appear after debugging, but not on the main map area. What should I do?

Anton Tananaev6 years ago

You need to compile minified version of the web app. It has been discussed many times.

You k5 years ago

hello Anton,

when i change the background image from release.html i notice that the background is also under the map, do you have any idea how can i put a background only for the web login page

here my release.html code :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Traccar</title>
<link rel="icon" sizes="192x192" href="/icon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="app.css">
</head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("back.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
<body>

<div class="bg"></div>
<div id="spinner"></div>
<div id="attribution">Powered by <a href="https://www.traccar.org">Traccar GPS System</a></div>
<script id="loadScript" src="load.js"></script>
</body>
</html>

Anton Tananaev5 years ago

You would need to programmatically remove it after login.

You k5 years ago

hello Anton,

thanks for your reply, is there a method to accomplish this with html/css or i need to add a javascript function ? if so could you please share an example ??

Anton Tananaev5 years ago

As I said, you need to do it programmatically, which means JavaScript. Example:

https://github.com/traccar/traccar-web/blob/master/web/app/controller/Root.js#L155-L158

You k5 years ago

so if i have well understood, i have to add a javascript function to load.js right ??

David3 years ago

Buenas noches, alguien pudo cambiar la imagen de fondo desde el archivo html?

David3 years ago

Buenas noches, despues de buscar mucho, agrege estos parametros al archivo release.hmtl:

<style>
    body {
    background: url(https://image.freepik.com/vetores-gratis/rastreamento-de-tecnologia-gps-com-espaco-aberto_99087-57.jpg) no-repeat center top fixed !important;
 
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    }
</style>

Y funciono para mi, tenga en cuenta que pueden agregar otras imagenes copian la URL de la imagen desde google por ejemplo y pengadola entre los parentesis.
CUIDADO CON EL CACHE DEL NAVEGADOR¡¡ limpienlo