<div class="image-container">
  <img src="https://source.unsplash.com/tMHAmxLyzvA" alt="Boston city skyline" >
  <div class="image-text">Welcome to WBOLT.COM</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600&display=swap");

body {
  font-family: "Chakra Petch", sans-serif;
}

img {
  display: block;
  margin: 0 auto;
  height: 100%;
  max-width: 100%;
  border-radius: 10px;
}

.image-container {
  position: relative;
}

.image-text {
  position: absolute;
  top: 10%;
  left: 24%;
  transform: translate(-20%, -50%);
  z-index: 1;
  color: white;
  font-size: 90px;
  font-weight: 900;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 3px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.