How to tie an image to text

  • Resolved chickspirit

    (@chickspirit)


    15 years, 5 months ago

    Is it possible to have an image tied to text so that no matter what the size of someone’s computer screen the image and text stay aligned properly?

    I want to add the dots that appear under my last name as images but when I align them using my laptop they are slightly off when viewed on my desktop which is a smaller screen.

    I’m thinking I can just make my entire name an image with dots included but would prefer not to do that. If, however, I do have to do that, again how do I have it align consistently like the rest of my similar headings?

    https://ktotheatothei.com/about/
    See dots under my last name SOREMEKUN near top of page

    Thanks for the input

Viewing 2 replies - 1 through 2 (of 2 total)

  • Create something like this:

    <h2>KAI OLABISI ABOSEDE <span class="lineundername">SOREMEKUN</span></h2>

    and attach it as background to this span.

    Peter

    Thread Starter chickspirit

    (@chickspirit)

    Hey Peter ~

    Once again thanks for the help.

    I tried what you suggested but it resulted in SOREMEKUN taking on the style attributes of my h2 span class. I guess I should have put the php code in my initial post.

    But at least it got me headed in the right direction…

    Who knows if what I ended up doing is the best/proper way. But with the caveat that I have limited experience, here is what I did should anybody else have the same need and circumstances.

    <h2>KAI OLABISI ABOSEDE<span><b>WHO</b></span></h2><h6><span>SOREMEKUN</span></h6>

    CSS

    h6 {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-transform : uppercase;
line-height : 15px;
position : relative;
margin : 0 0 10px 0;
}

h6 span {
background-image:url(images/dot1.png);
background-repeat:no-repeat;
position:absolute;
top : -38px;
right:222px;
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to tie an image to text’ is closed to new replies.