Is it possible to put text over images?

Discussion in 'HTML & Website Design' started by Roosta, Jul 1, 2009.

  1. #1
    I have about 5 images for my website which need to have a couple of words printed on them. Occasionally these words change and rather than having to go to Photoshop and change it each time is there any way I can do it so that I just have a the raw image and can write on top of it? I'm currently using Dreamweaver although I am competent enough to code in HTML and CSS so if someone could teach me either way it'd be much appreciated.

    Roosta
     
    Roosta, Jul 1, 2009 IP
  2. wierdo

    wierdo Well-Known Member

    Messages:
    1,646
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Try putting the image as the background of a div box and putting text in the box.

    Hope it helps
    Wierdo
     
    wierdo, Jul 1, 2009 IP
  3. Kazumael

    Kazumael Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yep that is the way to go.

    #box{
    background: url('images/box_background.png') no-repeat;
    }
    Code (markup):
    <div id="box">
    Text overlay
    </div>
    HTML:
     
    Kazumael, Jul 2, 2009 IP
  4. kferguson

    kferguson Well-Known Member

    Messages:
    805
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    110
    #4
    actually that is the only way to go.. u cannot put it as an image and then write some texts
     
    kferguson, Jul 2, 2009 IP
  5. Superslow

    Superslow Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi
    You also can create a table with a background an write the text in the table. ;)

    Superslow
     
    Superslow, Jul 3, 2009 IP
  6. thehen

    thehen Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yes you can, using negative margins.

    <img src="path/image.jpg" alt="image" />
    <p>Overlaying text</p>
    Code (markup):
    p {
    margin-top:-20px
    }
    Code (markup):
     
    thehen, Jul 3, 2009 IP
  7. wierdo

    wierdo Well-Known Member

    Messages:
    1,646
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    140
    #7
    For once people agree with me! I feel much better now. :)
     
    wierdo, Jul 3, 2009 IP
  8. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #8
    But, it would be cooler to write a simple PHP function to place the words over the images ;)
     
    crath, Jul 3, 2009 IP
  9. kferguson

    kferguson Well-Known Member

    Messages:
    805
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    110
    #9
    i agree with crath, i learnt this yesterday itself. its fun and you feel great after doing so. atleast me
     
    kferguson, Jul 3, 2009 IP
  10. zidit

    zidit Active Member

    Messages:
    90
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    58
    #10
    Create div tag is work. Table is old style web design and not do much with SEO
     
    zidit, Jul 3, 2009 IP
  11. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #11
    What you are talking is a common occassion when making navigation menus .
    That is using images as background and the text is "floating" over the background .

    These code should work fine.
    You can use it again and again in your following projects. Try it .
     
    justinlorder, Jul 7, 2009 IP
  12. dos_killer

    dos_killer Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    how do you do that ?
     
    dos_killer, Jul 7, 2009 IP
  13. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #13
    crath, Jul 7, 2009 IP
  14. spyka

    spyka Greenhorn

    Messages:
    90
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #14

    Could also use


    p {
    position:relative;
    top:-20px;
    }
    Code (markup):
    Plenty of ways to go about it, using PHP is overkill in this situation IMO
     
    spyka, Jul 7, 2009 IP
  15. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #15
    I said "It would be cooler", not it would be more efficient :p

    it was a joke, and I agree it would be extremely overkill.
     
    crath, Jul 7, 2009 IP