Title: Text on image
Last modified: August 19, 2016

---

# Text on image

 *  [cillianjoandidioninfo](https://wordpress.org/support/users/cillianjoandidioninfo/)
 * (@cillianjoandidioninfo)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/text-on-image/)
 * 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](http://bit.ly/bUXj9N), 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](https://wordpress.org/support/users/codycuellar/)
 * (@codycuellar)
 * [15 years, 11 months ago](https://wordpress.org/support/topic/text-on-image/#post-1546562)
 * 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

 * [image](https://wordpress.org/support/topic-tag/image/)
 * [text](https://wordpress.org/support/topic-tag/text/)

 * 1 reply
 * 2 participants
 * Last reply from: [codycuellar](https://wordpress.org/support/users/codycuellar/)
 * Last activity: [15 years, 11 months ago](https://wordpress.org/support/topic/text-on-image/#post-1546562)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics