Andrew C. Andrew C. - 3 months ago 11
CSS Question

How To I have Text partially overlay my Image?

I would like to know how to have a text partially overlaying an image.

Screenshot:here. (I have circled with blue what I want!)

I have searched for this on Google, but the only result I received was Image Captions, which is not what I am looking for.

Any help will be greatly appreciated.

Answer

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>

Comments