Reading Time: 2 minutes
How to have a background that automatically fit different screens
When using an image as a background for your map, it could become difficult to have an image that fit all kind of screen resolution. Here is a way to make your background image fit all king of screen.
- We’ll use the stylesheet approach to do it. Create a css file containing the following information under the “/usr/share/nagvis/share/userfiles/styles” directory and call it background.css. Be sure that the permission of the file is owned by apache user.
body {
background-image: url(/images/wallpaper-1920x1080.jpg);
background-repeat: no-repeat;
background-size: auto;
}
The above code indicate the use of the image called wallpaper-1920×1080.jpg as a background to automatically fit the screen used.
Note You can use tool like winscp or scp to transfert the css file to the BLESK server.
- Transfert the wallpaper-1920×1080.jpg image to the BLESK server under the “/var/www/html/images/” directory. This is the only place where your background image should be. Be sure that the permission of the file is owned by apache user.
Note You can use tool like winscp or scp to transfert the image to the BLESK server.
- Go to Edit Map | Map Options of your map
- Click on the ‘Appearance‘ tab and be sure that the “map_image” option is unchecked, then check the “stylesheet” options, write the name of your css file here and click “Save“. In our example, we’ll use the background.css file we have created previously.
