Forums

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

Home Forums CSS Insert both png float left and text float right over a background image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #209449
    chrysolight
    Participant

    I am trying to insert a line of text over a background image that already has a png logo image floating left with the background underneath. I am quite new to web coding (HTML and CSS), so I tend to try what seems intuitively correct. This approach usually only works about half the time. In this case whether as text or a transparent png the line of text refuses to go onto the background. I need help with it.

    The item I need to float right on top of the background image is:

    <a href="../index.html"><img src="../img/slogan.png" width="285" height="36" z index=100 float: right /></a>

    I need the text to appear on the lower right portion of the background image and it need to float as the window is resized.

    You will see that at present I have turned the line of text into a png image and it appears below the background image instead of over it. I don’t care if it is inserted over the background as text or as an image.

    This is my first post so if anyone needs more clarification and/or code I’ll do my best to provide it.

    [MOD EDIT – Codedump Removed]

    #209453
    Beverleyh
    Participant

    A live demo in CodePen, showing just the pertinent HTML and CSS, would be more useful :)

    #209524
    chrysolight
    Participant

    I Have posted a CodePen at
    http://codepen.io/chrysolight/pen/gaRQVM
    But I was unable to get the images to display — I inserted links to google-photos in the HTML, but that doesn’t seem to work, so I don’t know how helpful the CodePen will be for you.

    #209567
    chrysolight
    Participant

    This is how the code should display:
    <img
    src=”
    http://i.imgur.com/yulQCit.jpg&#8221; title=”source: imgur.com” />
    or
    here: [img]http://i.imgur.com/yulQCit.jpg[/img]
    or
    here: [url=http://imgur.com/yulQCit][img]
    http://i.imgur.com/yulQCit.jpg%5B/img%5D%5B/url%5D

    This s how the code currently displays:
    <img
    src=”
    http://i.imgur.com/6dyQSSU.jpg&#8221; title=”source: imgur.com” />
    or
    here: [img]http://i.imgur.com/6dyQSSU.jpg[/img]
    or
    here: [url=http://imgur.com/6dyQSSU][img]
    http://i.imgur.com/6dyQSSU.jpg%5B/img%5D%5B/url%5D

    (wasn’t sure which linking method will work in this forum)

    Thanks for your assistance.

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