1

I'm trying to position an image such that it is consistently above a specific letter no matter how a screen is resized. As an example, how would one position the green dot in the below fiddle consistently above the dotless i.

I've tried using absolute positioning with percentages but if I resize the screen then the image moves to the left/right of the dotless i.

HTML

<div id="pictureContainer">
  <img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png">
</div>
<div id="textContainer">
  <h1>H&inodot; World</h1>
</div>

CSS

#textContainer {
    text-align: center;
}

#greenDot {
    height: 10px;
    width: 10px;
}

JS FIDDLE https://jsfiddle.net/473hgg9o/1/

Nabil Kadimi
  • 10,078
  • 2
  • 51
  • 58
Tony Situ
  • 13
  • 4
  • 1
    I think you can reach your desired result through this: http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character – csguth Aug 17 '15 at 23:13

3 Answers3

2

Use relative and absolute positioning. Here is an updated fiddle. Change the top and left values as you see fit. This keeps them in the same container so they move together.

<div id="textContainer">
    <h1>
        H<span class="i-container">&inodot;<img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png"></span> 
        World
    </h1>
</div>

.i-container{
    position: relative;
}

.i-container img{
    position: absolute;
    top: 0;
    left: 0;
}
Kevin F
  • 2,836
  • 2
  • 16
  • 21
1

I would work with the dot as a background image:

    #textContainer {
      text-align: center;
    }
    .greenDot {
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png");
      background-position: 0px 10%;
      background-repeat: no-repeat;
      background-size: 100%;
      display: inline-block;
    }
    <div id="textContainer">
      <h1>H<span class="greenDot">&inodot;</span> World</h1>
    </div>
JohannesB
  • 1,995
  • 21
  • 35
0

I added the img in a span and gave it absolute positioning! 

 <h1>H<span><img id="greenDot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/64px-Ski_trail_rating_symbol-green_circle.svg.png"></span>&inodot; World</h1>

view this fiddle: https://jsfiddle.net/473hgg9o/4/

Gil F.
  • 31
  • 5