How To Make Text On Image Responsive With A Specific Position?

I'm trying to make a responsive website but I cant place my text on my image perfectly without it moving somewhere. I'm a beginner just for your information.

Solution 1:

Do you try to make the image into the div background ? Use this property : background-image: url("service.png");

Solution 2:

Html:

<div id=image><a href="service.html"><p id="text" class="line-1 anim-    typewriter">Unser Serviceangebot</p></a></div>

Css:

#image{
  background: url(service.png) no-repeat;
  padding: ;/* Resize it for your picture! *

}
#image a{
padding: 4px; 
}

Solution 3:

I don't know if this could help you but I get everything under the same div, and float them with:

#img
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;

    }
#txt
    {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

    }

Solution 4:

I'd had this issue before as well. I fixed it using cards. You shouldn't have to use z-index if you position your divs correctly. As AdrienVeillault said, you can use the background-image property, but if you don't want to, this has worked for me:

#background {
  position: relative;
  top: 0;
  left: 0;
  max-width: 60%;
  height: auto;
}

#text {
  position: absolute;
  top: 30vh;
  left: 20vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'Bitter', serif;
  color: rgba(255,255,255,.75);
  text-shadow: 3px 3px #000000;
}

<div class="container">
    <div id="card">
      <img id="background" src="https://greycellsenergy.com/wp-content/uploads/2016/06/light-grey-1170x780.jpg" />
      <a href="service.html">
        <p id="text" class="line-1 anim-typewriter">
          Unser Serviceangebot
        </p>
      </a>
    </div>    
</div>

Here's the fiddle for it: https://jsfiddle.net/hgrwfso3/

Also, if you can, I'd suggest looking into a CSS framework like Bootstrap - they have a css class of .img-responsive that deals with having a responsive image without all the work.

Hope this helps!

Solution 5:

have you tried using Bootstrap cards. That should fix the issue.

<div class="card card-inverse">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>