Text over image

Forum Moderators: not2easy

Message Too Old, No Replies

Text over image

Dizzycajun

7:27 pm on Jul 3, 2013 (gmt 0)

I'm not a programmer, but this to me seems like it would be fairly easy.

I want to have text superimposed top/left on the main image on my website. I have text there currently, but search engines can't see it because it is part of the picture.

So I want to set the picture as background and have text coded over it.

I found this code, which would probably work:

div#test {
background-image: url(/images/backgroundimage.JPG);
background-repeat: no-repeat;
height: 500px;
width: 380px;
}

<div id="test">Superimposed Text</div

I found the .css file where the first part goes. The question is, where does the second <div id= go? I see where the image is loaded from "view source" but I can't find any file that has that syntax in it. So it must be dynamic, how do I find that file and add the above code?

Thanks, any help would be appreciated

lucy24

8:08 pm on Jul 3, 2013 (gmt 0)

The question is, where does the second <div id= go?

? Do you mean, the div that goes in the html that the CSS belong to?

That's entirely up to you. If it's a banner headline, it will go somewhere near the top. "Top left" means it may even be the very first div within the <body>.

Image files used by css tend to be requested as soon as the css is loaded, even if the specific page doesn't call for that class or id. (If it were a font rather than an image this would be a huge no-no, but apparently it's OK with background images.)

Dizzycajun

8:36 pm on Jul 3, 2013 (gmt 0)

"? Do you mean, the div that goes in the html that the CSS belong to?
"
Yes. - I cant put the text in the .css file. I can't locate the html that puts the image on the page. If I can't find that, how can I put the text over the image? Thanks!

Dizzycajun

8:48 pm on Jul 3, 2013 (gmt 0)

it is driving me crazy. Everything I read just says put it in the <div> that calls the image. I can't find any <div> that calls the image.. I've search using substr and other methods and I can't find it - but I see it in my page source code, it's definately there.

DrDoc

7:50 pm on Jul 3, 2013 (gmt 0)

Welcome to WebmasterWorld!

Normally, you probably just have

<img src="" ...>

somewhere in your code. You want to replace that with the

<div ...>

from your example above.

tangor

1:54 am on Jul 10, 2013 (gmt 0)

Old School:

<table width="(width)" height="(height)" background="(path to image)" cellpadding="5" cellspacing="0"> <tr> <td valign="bottom"> <p><b><font color="#ffffff"> (text to appear over the image goes here) </font></b></p> </td> </tr> </table>

CSS version:
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;"> <div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;"> <p>(text to appear at the bottom left of the image)</p> </div> <p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;"> (text to appear at the top right of the image) </p> </div>

lucy24

9:48 am on Jul 10, 2013 (gmt 0)

I can't locate the html that puts the image on the page.

Have you got the html open in some type of editor? Search for the string
<img
If it's an ordinary image displayed in the ordinary way-- not yet a background, the way you want it to be-- it has to turn up. Probably very near the beginning of the file. That is, ahem, shortly after the word <body>. I don't know how much clutter is in the <head> so far.

It would be easier to answer if we all had a clearer idea what your current knowledge level is. If you're helplessly staring at a wad of HTML feeling like a monkey looking at the innards of a Swiss watch, that would need one type of answer. If you're accustomed to HTML and CSS but have never happened to do a background image before, that's a different type of answer.

Old School:

<table

Bite your tongue :-P

Text over image

Dizzycajun

lucy24

Dizzycajun

Dizzycajun

DrDoc

tangor

lucy24

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week