Skip navigation
SHogge
Currently Being Moderated

Putting text over a picture

Jul 6, 2012 11:37 AM

Tags: #css

I am trying to put actual text over a picture on a website. I know that I need to use CSS but am unsure of how to structure this to work. The current site is at http://straightline-advisors.com/  I need to replace the quote on the middle of the page with text that can be indexed when crawled. Does anyone have an idea of how to do this? Thanks in advance.

 

~ Scott

 
Replies
  • Currently Being Moderated
    Jul 6, 2012 11:49 AM   in reply to SHogge

    I can't see your page.

    But the simplest way is to put image in the background of your div with CSS.

     

    #divName {

    background: url(your_image.jpg) center no-repeat;

    min-height: xxxpx; /**height of image**/

    width: xxxpx; /**width of image**/

    }

     

     

    HTML:

     

    <div id="divName"><h3>Your text goes here...</h3></div>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 12:45 PM   in reply to SHogge

    Did you define a local site folder in Dreamweaver before you began this project?

    Did you save your image for the web as an optimized jpg, png or gif?

    Did you save that image to your DW Local Site folder?

    Can you upload your test page and image to your remote server and post the URL?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 1:41 PM   in reply to SHogge

    Change your relevant HTML to this and change CSS padding (in green) to suit your needs.

     

     

    <div id="BackImage">

    <h3 style="padding:165px 55px">Our Core Philosophy:</h3>

    <h4>At STRAIGHTLINE, we are real estate development consultants exclusively focused on hotels, resorts, and related hospitality property types. Our typical clients are developers or attorneys who seek to better understand the financial, operational and market underpinnings of this complex business. They select us because we have a proven record of success derived from authentic career experiences.</h4>

    </div>

     

     

    Nancy O.

     

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 2:58 PM   in reply to SHogge

    Copy & Paste this code into a new, blank HTML page.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Straightline Advisors</title>
    
    <meta name ="description" content="Focused firm which targets limited number of engagements in the company's areas of specialty -real estate development advisory services & asset management for hotels, condo hotels, resorts, spas, casinos, and shared ownership projects." />
    
    <meta name ="content-type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    body {
    background-color: #000;
    background: #000 url(http://straightline-advisors.com/Test/images/Home3.jpg) center no-repeat;
    color:#FFF;
    min-height: 655px;
    width: 700px;
    margin:0 auto; /**with width, this is centered**/
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 100%;
    /**text shadows**/
    -webkit-text-shadow: 0px 0px 8px #000;
    -moz-text-shadow: 0px 0px 8px #000;
    text-shadow: 0px 0px 8px #000;
    }
    
    h1 {text-indent: -9999em; margin-top:0; margin-bottom:0}
    h2 {padding-top:90px; font-size: 18px; font-style:italic;}
    h3 {margin-top:0; font-size: 20px;}
    
    h2, h3 {padding-right: 25px; padding-left: 155px;}
      
    </style>
    </head>
    
    <body>
    <h1>Straighltine Advisors</h1
    
    <h2>Our Core Philosophy:</h2>
    <h3>At STRAIGHTLINE, we are real estate development consultants exclusively focused on hotels, 
    resorts, and related hospitality property types. Our typical clients are developers or attorneys who 
    seek to better understand the financial, operational and market underpinnings of this complex business. 
    They select us because we have a proven record of success derived from authentic career 
    experiences.</h3>
    </div>
    
    <!--google tacking code-->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-29266726-1']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    
    </body>
    </html>

     

     

    PS. I removed all the useless meta keywords because search engines ignore them. Title, description and actual content are all they pay attention to.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 3:30 PM   in reply to SHogge

    You cannot apply an image map to a background image.

     

    Why not just make the text to be clicked into clickable text? i.e. a CSS-styled hyperlink?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 3:34 PM   in reply to SHogge

    So convert it into text instead.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2012 3:43 PM   in reply to SHogge

    As John said you can't use background-images for links.   As a workaround, you could insert a clearpixel GIF under your text and use that as the anchor for your link.

     

    </h3>

    <a href="#"><img src="Images/clearpixel.gif" width="700" height="200" /></a>

    </div>

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points