CSS Position Relative to background-img for inner div-CodePudding

I have the following HTML for the outer div to centre and contain the back ground image. This works fine. I want to create a inner div relative to the image size to place the div in a black square in the image. the image size is 1783x1481 and the corners for the inner div should be TopLeft: 397,318 TopRight: 1140,318 BottomLeft: 397,903 BottomRight: 1140,903

I'm not sure how to approach this, do I use percentages? do I use view-height scaling?

#outer {
  position: relative;
  background-image: url(https://jrwr.io/terminal.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="outer">
  <div id="inner">Example Text here</div>
<div>

You can see a example of this issue at my website jrwr.io and/or from this video on imgur

CodePudding user response：

If you want to scale the image with viewport without distorting it you can use aspect-ratio property:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: rgb(78, 3, 78);
  overflow: hidden;
}

#outer {
  position: relative;
  background-color: rgb(78, 3, 78);
  background-image: url(https://i.stack.imgur.com/QhkFU.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  width: calc(min(100vw, 120vmin - 10px));
  /* aspect ratio calculates the height */
  aspect-ratio: 1.2/1;
}

#inner {
  position: absolute;
  top: 21%;
  left: 22%;
  width: 42%;
  height: 40%;
  background-color: black;
  font: 2vmin monospace;
  color: limegreen;
}

<div id="outer">
  <div id="inner">
    <br>
  <p>&nbsp;Testing Terminal</p>&nbsp;&gt; <span>ping www.google.com -t </span></div>
</div>

Here, width is set to calc(min(100vw, 120vmin - 10px)).

If viewport height(vh) > viewport width(vw), then vmin = vw, and 100vwwill be used and image height will be calculated automatically as per the aspect ratio (1783/1481=1.2).
If vh < vw then, vmin = vh. And width will be set to 120% of vh. -10px is used to avoid scroll bars. You can use overflow:hidden on body.

CodePudding user response：

Is this what you are getting at? I built it with half the size so it would fit better in snippet but actual values are in there, just commented out.

.outer {
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      width: 100%; 
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      top: 0;
      background-image: url("https://i.stack.imgur.com/cTRdU.jpg");
      opacity: 1;
      margin: 0 auto;
    }

    .inner {
      background: black;
      top: 20%;
      left: 20%;
      right: 20%;
      bottom: 20%;
      position: absolute;
      border: 1px solid white;
    }

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>

<body>
  <div class="outer">
    <div class="inner">&nbsp;
    </div>
  </div>
</body>

CodePudding user response：

If you want to centre align the DIV then you can go for display: flex?

.outer {
   display: flex;
   align-items: center; // vertical center
   justify-content: center; // horizontal center
}

https://stackblitz.com/edit/web-platform-vxi2dd