1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Displaying Text Over an Image

Discussion in 'HTML & JavaScript' started by kimkils, Aug 16, 2010.

  1. kimkils

    kimkils Power Member

    Joined:
    Jan 10, 2009
    Messages:
    663
    Likes Received:
    225
    I've been trying to get this to work for ages, i want an image, and then be able to have text wherever i want over it... BUT it has to stay in the same position if the window is re-sized or if different screen resolutions are used.

    I know it's to do with DIV's, but i cant quite get my head around it, any takers? I've checked out links on the tinterwebz but they dont maintain the placement when the window resizes.

    Salrite, figured it out, wasnt hard *slaps face* http://css-tricks.com/text-blocks-over-image/
     
    Last edited: Aug 16, 2010
  2. sheppardzwc

    sheppardzwc Newbie

    Joined:
    Oct 21, 2010
    Messages:
    15
    Likes Received:
    0
    CSS "position" and "padding" ;)
     
  3. mward

    mward Newbie

    Joined:
    Oct 19, 2010
    Messages:
    43
    Likes Received:
    3
    Occupation:
    manager
    Location:
    uk
    you need to use a higher z-index for the div that holds the text, then use positive absolute, you may need a div around the image and the text.
     
  4. mktanny

    mktanny Regular Member

    Joined:
    Oct 22, 2009
    Messages:
    225
    Likes Received:
    62
    Occupation:
    Blog editor and IM
    Z-index works only for images ,so if you want to overlap one image over the other ,that's when you use the z-index and not in this case.
     
  5. puremagic

    puremagic Junior Member Premium Member

    Joined:
    Sep 26, 2010
    Messages:
    110
    Likes Received:
    24
    There are two ways to do it, either use watermarking or you can keep image in the background and keep text over the image
     
  6. disaffected

    disaffected Junior Member

    Joined:
    Nov 9, 2008
    Messages:
    137
    Likes Received:
    47
    Z-index is not only for images. It works on all positioned elements. I use it quite often for tooltips and fly out menus.
     
  7. ara_kopru

    ara_kopru Newbie

    Joined:
    Jan 29, 2011
    Messages:
    13
    Likes Received:
    0
    php can do that. you should research php's image functions.