Background modify
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');
});
});
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>
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?
You need to compile minified version of the web app. It has been discussed many times.
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>
You would need to programmatically remove it after login.
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 ??
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
so if i have well understood, i have to add a javascript function to load.js right ??
Buenas noches, alguien pudo cambiar la imagen de fondo desde el archivo html?
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
Can't you just set body background?