homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Text over image

 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



 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.)


 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!


 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.


 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.

 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>


 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
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:


Bite your tongue :-P

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved