Image behind text

Coding Help
,
1

Hi
I was inspired by Glitch’s website with the highlight image behind the text and I would like to integrate something similar. I’m using this image. The text is an h1 tag. I also want the image to be 50% transparent and I want it to look like this image (click the next icon)

2

did you try:

css:

.container {
  width: 500px;
  position: relative;
  text-align: center;
  color: black;
}
.highlight-image {
  width:100%;
  z-index: 0;
  opacity: 0.5;
}
.text {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

with html:

<div class="container">
  <img src="img-src.jpg" alt="Highlight" class="highlight-image">
  <h1 class="text">DREAM. PLAN. CODE. REPEAT.</h1>
</div>

hope this helped!

2 Likes
3

or with just html:

<style>
.container {
  width: 500px;
  position: relative;
  text-align: center;
  color: black;
}
.highlight-image {
  width:100%;
  z-index: 0;
  opacity: 0.5;
}
.text {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="container">
  <img src="img-src.jpg" alt="Highlight" class="highlight-image">
  <h1 class="text">DREAM. PLAN. CODE. REPEAT.</h1>
</div>
1 Like
4

I’ll try that. Thanks.

1 Like