[Solved] How To I have Text partially overlay my Image?

by


Just use position: relative in your text element and offset it by some value to the left.

Code:

h1 {
  position: relative;
  top: 50%;
  right: 6%;
}

jsFiddle: → here.

Example:

#wrapper {
  display: flex;
  justify-content: center;
}
#parent {
  width: 550px;
  height: 343px;
  background-image:
    url(https://media-cdn.tripadvisor.com/media/photo-s/08/73/aa/76/trolltunga.jpg);
  background-size: contain;
}
#child {
  position: relative;
  top: 50%;
  right: 6%;
}
<div id="wrapper">
  <div id="parent">
    <h1 id="child">A Fantastic Title<br/>&rarr;</h1>
  </div>
</div>

solved How To I have Text partially overlay my Image?