Console

Position a text console with semi-transparent background

by dave2

HTML

<!DOCTYPE html>
<html lang="en">

  <body>
    <div id="container">
      <div id="bg">
        background
      </div>
      <div id="text">
        content
      </div>
    </div>
  </body>

</html>

CSS

body {
  background-color: gray;
}

#container {
  position: relative;
  padding: 50px;
  padding-top: 150px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  opacity: 0.25;
  border: 1px solid blue;
  box-sizing: border-box;
}

#text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  overflow-y: hidden;
  color: greenyellow;
  border: 1px dashed;
  box-sizing: border-box;
}