Welcome to WebmasterWorld Guest from 54.211.182.82

Forum Moderators: not2easy

Message Too Old, No Replies

Text over image

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

New User

joined:July 3, 2013
posts: 3
votes: 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
8:08 pm on July 3, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13444
votes: 390


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.)
8:36 pm on July 3, 2013 (gmt 0)

New User

joined:July 3, 2013
posts: 3
votes: 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!
8:48 pm on July 3, 2013 (gmt 0)

New User

joined:July 3, 2013
posts: 3
votes: 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.
7:50 pm on July 3, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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.
1:54 am on July 10, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:7163
votes: 443


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>
9:48 am on July 10, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13444
votes: 390


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
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members