CODEWITHSUNDEEP
htmlcssimageresponsive
Samuel Stokes
Samuel Stokes

Reputation: 27

Get an Graphic to Stay in Same Place Relative to H1 Text

I'm trying to get a small yellow swoosh to underline a word in some text and stay where it is as the page resizes. Right now I can get the swoosh in the right spot under the text, but when the screen resizes it all goes to hell.

Here is an image of what I'm going for enter image description here

<div>
  <span>
<h1>How are you doing? Hello World.</h1>
<img src="imageurl here">
  </span>
</div>

div {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 40%;
    position: absolute;
}

h1{
  text-align: center;

}

span {
   margin-left: 140px;
   top: 40px;
   position: absolute;
  z-index: -1;
}

(I didn't want to share the image URL as it is proprietary)

Any ideas on how to achieve this type of effect responsively?

Upvotes: 1

Views: 198

Answers (1)

Rager
Rager

Reputation: 876

Put your image inside of the h1 tag and give your h1 tag a position property. Also make sure you are setting h1 to be a inline-block element and center it somehow.

<h1>How are you doing? Hello World.<img src="imageurl here"></h1>

h1{
  text-align: center;
   position: relative;
   display: inline-block;
   margin: 0 auto;
}

img{
   left: 0;
   top: 0;
   position: absolute;
  z-index: -1;
}

There are many different ways to achieve what you're after.

Upvotes: 1

Related Questions