/* Container holding the image and the text */
.containerccc {
    width: 50%; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

.container2 {
  position: relative;
  text-align: center;
  color: white;
}

.container3 {
  width:98%;
  height:98%;
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottomish {
  position: absolute;
  top: 70%;
  left: 30%;
}

.barImg{
  position: absolute;
  top: -5px;
  left: 0px;
}

.containerImg33 {
  position: relative;
  text-align: center;
  color: white;
}

.image33{
    position: relative;
    height: document.querySelector('myimage').clientHeight;
    width: auto;
    border: 1px solid black;
 }