'How to create a browser overlay that is visible, always centered, and scales to the size of the viewport?

Please note the following, related, questions:

  1. Overlaying a Image over a whole web page

  2. Keep a background image centered even when window is resized

Here is the html and css code I am using: Note the "overlay" sections.

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
        <link rel="shortcut icon" href="static/favicon.ico">
        <link rel="stylesheet" href="static/style.css"/>
        <script src="static/jquery-3.6.0.min.js"></script>
        <script src="static/throttle.js"></script>
        <script src="static/Joystick_Data_Test.js"></script>

        <title>GoPiGo3 Joystick Data Test</title>

    </head>
    <body>

        <div class="container">
            <div id="zone_joystick">
                <script language="JavaScript">
                document.write('<img id="video_source" src="' + window.location.protocol + '//' + window.location.hostname + ':5001' + '/stream.mjpg' + '"/>' );
                </script>
            </div>

            <div class="robot">
                Joystick Data Test
                <ul>
                <li id="motion_state">Motion State: Waiting for Joystick</li>
                <li id="angle_dir">Direction: None</li>
                <li id="time_stamp">Timestamp: 0</li>
                <li id="force">Applied Force: 0.00</li>
                </ul>
            </div>
        </div>
        <div class="overlay"></div>
    </body>
</html>

The corresponding CSS:

#zone_joystick {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#video_source{
    display:block;
    width:100%; height:100%;
    object-fit: cover;
    background-color: white;
    background-image: url("/static/plane_loading.gif"), url('/static/waiting.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.robot {
    position: absolute;
    height: auto;
    width: 20%;
    min-width: 220px;
    left: 0.5%;
    top: 0.5%;
    padding: 1%;
    font-family: "Lucida Sans Typewriter";
    color: rgb(0, 0, 0);
    background: rgba(223, 226, 219, 0.7);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("Graticule-transparent-yellow.png");
}

Here is the graticule image: (A transparent GIF.) I have several identical GIF's in different colors. When I edit the CSS/html, I change the color used to make sure the browser has fully updated the cached files.

Black transparent Graticule GIF

Here is the result: enter image description here

Situation:

The background is a live video stream from a Raspberry Pi based robot that I can drive around and I am currently experimenting with placing informational overlays on the image: Things like current battery voltage, distance to an obstacle, bumper impact status, and so on.

To start with, I want to place a simple x-y graticule over the image before I begin more complex image overlays.

The current code was copied, essentially verbatim, from the answer in the first article referenced above.

What I want to achieve:

  1. The image to be positioned relative to the center of the browser's point of view. In the image shown above, it appears to be anchored to the top-left corner of the window.
  2. The image to automatically re-scale to fit the browser window, with respect to the aspect ratio of the image. (i.e. if the image were a circle, it should always remain circular.)
  3. After re-scaling, the entire image should be visible with the scaling constrained by the smallest dimension. Note that it would be nice to be able to set a minimum dimension after which the image would be centered, but cropped.
  4. The image should be shown once only. (you will notice in the picture above, the image is being tiled horizontally.

What Happens:

  • Using the code from the first article, I get an overlay image, but it is not centered and it repeats. If I try to change any of the parameters, (except for the location of the image itself), the image disappears. Note that changing the top and left parameters move the anchor point but the image remains.
  • Using the code from the second article, the image never appears.

What I would like to know:

  1. Why does the image disappear from the first example if I try to modify the arguments passed to the CSS "commands"? (i.e. If I try to set the dimensions to "auto" or other things to constrain or center the image.)
  2. Why doesn't the second example work at all?
  3. What do I have to do to accomplish what I want.

Note that I have spent the last several weeks researching this and trying various things, all to no avail. I have no idea what I am doing wrong and the various teaching and example web pages are absolutely no help to me so far.

Any help would be gratefully appreciated.

Update:
As suggested below, I have tried the following:

(html)

[snip - preceding code is the same as was shown before]
        <div class="container">
            <div id="zone_joystick">
                <script language="JavaScript">
                document.write('<img id="video_source" src="' + window.location.protocol + '//' + window.location.hostname + ':5001' + '/stream.mjpg' + '"/>' );
                </script>
            </div>

            <div class="robot">
                Joystick Data Test
                <ul>
                <li id="motion_state">Motion State: Waiting for Joystick</li>
                <li id="angle_dir">Direction: None</li>
                <li id="time_stamp">Timestamp: 0</li>
                <li id="force">Applied Force: 0.00</li>
                </ul>
            </div>
        </div>

        <div class="flex-container">
            <div class="overlay"></div>
        </div>

CSS:

[snip - preceding code is the same as was shown before]
.robot {
    position: absolute;
    height: auto;
    width: 20%;
    min-width: 220px;
    left: 0.5%;
    top: 0.5%;
    padding: 1%;
    font-family: "Lucida Sans Typewriter";
    color: rgb(0, 0, 0);
    background: rgba(223, 226, 219, 0.7);
}

.overlay {
    align-self: center;
    position: fixed; inset: 0;
    /* top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    z-index: 2;
    background: url("Graticule-transparent-dark-red.png");
}
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Note that a negative z-axis places the overlay behind everything else. I used a z-axis value of "2" to make sure it's on top of everything.

I have looked through the flex examples and the various positioning and scaling CSS parameters, and I get either exactly what I had before, including the repeating - or absolutely no overlay showing.

I would be grateful if someone could help me understand what I am doing wrong.

htmlcssimageoverlay


Solution 1:[1]

See the comments within CSS for explaination:

.overlay {
  /* element always visible and covering the entire viewport */
  position: fixed;
  inset: 0;
  
  /* include the image as background */
  background-image: url('https://i.stack.imgur.com/lAtZG.png');
  
  /* letting the image cover the entire viewport */
  background-size: cover;
  
  /* cenetring the image vertically and horizontally */
  background-position: center;
  
  /* positive z-index ensures that the overlay is always top z-axis wise */
  z-index: 100;
}
<div class="overlay"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions