Images resizing upon resizing window?

Issue

I'm kind of new to CSS/HTML. I'm trying to create a webpage. On full window, the elements/images look great. But when I resize the window screen, the top and bottom panel photos seem to move and resize. I want to keep them the same size and the same position.

• Full screen window - looks normal. It should look like this
• Resized window - the top and bottom panels have moved
• Resized window - the top and bottom panels don't look normal

body {
  background-color: #70ADD5;
}

iframe {
  margin: auto;
  background: url(./images/Background\ Panel.png);
  background-size: cover;
  position: absolute;
  border: none;
  top: 3%;
  left: 9%;
  transform: scale(1, 1);
  width: 1600px;
  height: 900px;
  z-index: -1;
}

#bottom {
  position: fixed;
  transform: scale(1, 1);
  object-fit: contain;
  width: 81.2%;
  top: 690px;
  left: 10%;
}

#top {
  position: fixed;
  transform: scale(1, 1);
  object-fit: contain;
  width: 81.2%;
  top: 5px;
  left: 10%;
}

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />

<iframe></iframe>
<img src="./assets/images/Bottom Holder.png" id="bottom" alt="bottom panel"></img>
<img src="./assets/images/Top Holder.png" id="top" alt="top panel"></img>

Solution

To understand more about viewports consider reading: mozilla viewport concepts.

Using absolute pixels can cause problems with regards to changes in screen size. Instead use relative units such as percentages or viewport units (vh and vw). This will make the images scale with window size. Example: width: 90vw; or width: 50%;

For specific ranges of screen sizes you can also implement media queries to set specific styles for the images based on the screen size. That would look like this:

@media screen and (max-width: 768px) {
    .element {
        width: 90vh;
    }
}

You can also use min or max height and width values to prevent the elements from appearing too small or large on different window sizes. Example: min-height: 75%;. More can be read here: min-height, max-height, min-width, and max-width.

It is important to remember that a big part of CSS design is about making tweaks and changes and see how they are correlated with the output on your website, and at different screen sizes. I can't tell you what will look good, you have to make those changes for yourself.

Answered By - Jacob