How do I put responsive text over image?-CodePudding

I've been trying to make a responsive image with text on it. My problem is that I can't make the structure and behavior to this whole component.

Any tips for how I can make it?

CodePudding user response：

Try something like this.

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
 margin: 0;
}

.hero {
  height: 100%;
  width: 100%;
  background: url('https://images.unsplash.com/photo-1633934243950-03a086c09e41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding-left: 40px;
  padding-top: 40px;
  background: rgba(0,0,0,0.35);
}

<div class="hero">
  <div class="overlay">
    <h1>Hello World</h1>
    <p>Some other text goes here</p>
  </div>
</div>

CodePudding user response：

Create a div with the image and another div inside, place all your text in the inner div and position it absolute on top of the image.

CodePudding user response：

Here are 2 approaches for it

.image-container{
  width:100%;
  height:40rem;
  position:relative;
}

img{
  width:100%;
  object-fit:cover;
}

p{
  position:absolute;
  font-size:4rem;
  color:red;
  font-weight:bold;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.image-container-two{
  height:40rem;
  width:100%;
  background:src("https://unsplash.it/700");
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
}

.text-two{
  font-size:4rem;
  color:red;
  font-weight:bold;
}

<div>
<div class="image-container">
  <img src="https://unsplash.it/500" />
  <p> This is some text </p>
</div>
<div class="image-container-two">
  <div class="text-two">This is also some text </div>
</div>
</div>

CodePudding user response：

try to change the position to: position: relative;