Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Best way to overlay a link button to a .png image?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #181826
    ostinoh
    Participant

    Hello –

    I’m not understanding how I would be able to overlay a link button (to another url) and place it into a space in an image I uploaded and added to my page.

    I’m ok at looking at CSS code. But need the extra direction or idea if there is another way to achieve what I need to do.

    We have flyer that I’m adding to our website and instead of the directions on where to register I wanted to replace that with Register Button.

    Please let me know if you need more info or any ideas on how I can do this.

    Thank you

    #197144
    donaldmedina
    Participant

    Hi,
    I am a professional web designer working in a reputed website design company and have tried this code. It works:
    Change your html to:
    <a class="image"></a>
    Then add your css to:

    .image:before {
    content:url('http://LinkToMyImage');
    // You should also be able to safely eliminate
    display: block;// when settingposition: absolute, but included it just in case you
    // experienced problems setting width and height
    display: block;
    height: 169px;
    width: 220px;
    position: absolute;
    // top 0 is usually inferred when setting position: absolute;
    // you should be able to remove this
    top: 0px;
    right: 0px;
    }

    #197147
    Paulie_D
    Member

    It’s hard to comment much without knowing your existing HTML.

    I’m not understanding how I would be able to overlay a link button (to another url) and place it into a space in an image I uploaded and added to my page.

    From the sound of it you have an element containing an an image something like

    <div>
    <img src="path-to-my-image" alt="my alt text"/>
    </div>
    

    Is that what you have so far?

    And you want to put a link “button” to another page somewhere on top of that image…right?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.