Text on image

  • cillianjoandidioninfo

    (@cillianjoandidioninfo)


    15 years, 11 months ago

    Hi,
    I am trying to put together a link bar at the end of my page. I do not want to put the text on with Photoshop, but rather I want to overlay the site text on it. I have attempted to do this here, but as my image calls for two ‘columns’ of text, I am running into difficulties. On the left hand side of the image, you’ll notice I have an image and text placed over the background image. How do I do this on the right hand side?

    This is the code I have used so far:

    <div class="aligncenter" style="background-image: url(http://guywingfield.com/wp-content/uploads/2010/06/double-buttons.png); background-repeat: no-repeat; height: 157px; width: 847px; margin-left: 20px;">
<div>
<p><a href="http://guywingfield.com/"><img class="alignleft size-full wp-image-786" style="margin-top: 30px; margin-left: 30px;" src="http://guywingfield.com/wp-content/uploads/2010/06/demo.png" alt="" width="120" height="99" /></a></p>
<div>
<p style="color: black; font-size: 120%; padding: 12px 440px 0px 40px;">See It For Yourself.</p>
<div>
<p style="color: black; font-size: 120%; padding: 0px 440px 0px 40px;"><span style="font-size: 13px;"><a href="http://guywingfield.com/">Experience a live demo of the Basic Package.</a></span></p>
</div>
</div>
</div>
</div>

    Thanks,
    CA

Viewing 1 replies (of 1 total)
  • codycuellar

    (@codycuellar)

    15 years, 11 months ago

    Try something like this:

    <div class="outerwrapper" style="width: 500px; height:200px; background: blue;">
  <div class="left" style="width: 50%; background:green; float: left;">
    <div class="contentleft" style="padding: 20px;">
      <img src="imagesource.jpg" />Content
    </div>
  </div>
  <div class="right" style="width: 50%; background:red; float: right;">
    <div class="contentright" style="padding: 20px;">
      <img src="imagesource.jpg" />Content
    </div>
  </div>
</div>

    Granted, you’ll have to change all the values to match your site, but that basic set-up will give you a visual representation of what you’re going to get. I’d also suggest taking out all your css and putting it in a separate css document and linking your pages to it, it makes things much neater and easier to modify. Hope that helps!

Viewing 1 replies (of 1 total)

The topic ‘Text on image’ is closed to new replies.

Tags