Placing Paragraph Text over an image.

Discussion in 'HTML & Website Design' started by CodePlay, Apr 5, 2015.

  1. #1
    Hi, I have an image with some black background in it (right of the pen). I'd like to place (center) over that black background a paragraph of white text. My previous iteration has the text typed in the back space and saved with it as an overall graphic. I'm not sure that's the right approach though, so I thought maybe a separate text box is the way to go and place it over the black rectangle.

    I started creating a text div within the image div and using CSS to align the text over the black space. So far I'm making a mess of it and thought I'd ask if anyone had some suggestions?

    Banner2_resize.png
     
    CodePlay, Apr 5, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    html:
    
    <p id="imagetext">Text goes here</p>
    
    Code (markup):
    css:
    
    #img_container {
    position: relative;
    }
    #imagetext {
    position: absolute;
    top: 10px;
    right: 30px;
    color: #fff;
    }
    
    Code (markup):
    This assumes that both the image and the p-element is within a container (div, maybe) with an id of "img_container"
     
    PoPSiCLe, Apr 5, 2015 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    You should also consider that bounding your text within an image is a stupid idea. It works for print because print is static. The web is dynamic. What happens when your visitor enlarges your text? Can you spell breakage?

    cheers,

    gary
     
    kk5st, Apr 5, 2015 IP
  4. CodePlay

    CodePlay Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thanks Popsicle. Cheers. Gary, yes, the road rules from print to web are different and I'm trying to find and learn them as quickly s possible. Two weeks ago, I started with W3 schools and am also watching HTML industry videos to grasp the jump as quickly as possible. And I know the journey is a vast one, but necessary and worth it. Yes, my questions and approach will seem stupid but that's where I'll find out the dos and dont's. So far I've not found a single road map book on web development best practice. W3 Schools is the cleanest rule book I've seen so far (recommended from my local college). What I'm finding across the web are sometimes decent examples but very fragmented with explanation and depth. This is why I'm hitting the forums; to learn and compare.

    Thanks for your opening sentence too. I need to know what's right and not. My first web page is just to get us out there with the right message. Later I'll refine it and develop it as technique-ideas flow.

    Thanks, Gary, Popsicle.
     
    CodePlay, Apr 5, 2015 IP