Title: Text over IMG using CSS?
Last modified: August 20, 2016

---

# Text over IMG using CSS?

 *  [skyyypilot](https://wordpress.org/support/users/skyyypilot/)
 * (@skyyypilot)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/)
 * Most of my code is being ignored.
 * The HTML:
 *     ```
       <div class="imageprocess">
       <img alt="" src="http://appliedcolors.com/wp-content/uploads/2011/08/process-no-text.jpg" />
       <div class="texttitle1">
       <p>Step 1:  Fill Deep Damage with Bondo Putty</p>
       <div class="textprocess">
       <p>Paint is a poor filler:  it shrinks 85% once dry.  Filling a scratch 4, 5 or 6 times with paint, waiting for it to cure, then wetanding and buffing can take hours...not practical for a busy tech.  We created a process in which you fill deep scratches with Bondo putty using a squeegee and then use a remover chemical—Paint Leveler—to remove the excess putty.  In a few minutes you create a flat and level foundation for color-matching paint.</p>
       <div class="texttitle2">
       <p>Step 2:  Choose a Matching Color</p>
       <div class="textprocess2">
       <p><Bleh bleh blah blah.</p>
       </div>
       </div>
       </div>
       </div>
       </div>
       ```
   
 * The CSS:
 *     ```
       .textprocess {
       	position:absolute;
       	font-size: 12px;
       	top:32px; /* in conjunction with left property, decides the text position */
       	left:18px;
       	width:405px; /* optional, though better have one */
       }
       .texttitle1 {
       	position:absolute;
       	font-weight: strong;
       	font-size: 20px;
       	top:26px; /* in conjunction with left property, decides the text position */
       	left:18px;
       	width:415px; /* optional, though better have one */
       }
       .textprocess2 {
       	position:absolute;
       	font-size: 12px;
       	top:280px; /* in conjunction with left property, decides the text position */
       	left:18px;
       	width:405px; /* optional, though better have one */
       }
       .texttitle2 {
       	position:absolute;
       	font-weight: strong;
       	font-size: 20px;
       	top:286px; /* in conjunction with left property, decides the text position */
       	left:18px;
       	width:415px; /* optional, though better have one */
       }
       ```
   
 * The result:
    [http://appliedcolors.com/4-process-part-2.html](http://appliedcolors.com/4-process-part-2.html)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [zartgesotten](https://wordpress.org/support/users/wearitwell/)
 * (@wearitwell)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268450)
 * So… what’s the problem????
 *  Thread Starter [skyyypilot](https://wordpress.org/support/users/skyyypilot/)
 * (@skyyypilot)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268527)
 * 1. .texttitle2 is indented
    2. .textprocess2 doesn’t even appear
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268534)
 * this is strictly a html and css issue, and has not much to do with wordpress.
 * you are using nested divs, with absolute positioning, so each nested div takes
   the other as reference.
 * for testing, try setting all left and top positions to 20px, add a different 
   color background to each of the divs, to get an idea where all the stuff is hanging
   around.
 *  [zartgesotten](https://wordpress.org/support/users/wearitwell/)
 * (@wearitwell)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268566)
 * What alchymyth said 😉
 *  [myka.marie27](https://wordpress.org/support/users/mykamarie27-1/)
 * (@mykamarie27-1)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268569)
 * Hi i’m new in wordpress, and i still am learning to make themes, skyyypilot what
   theme am i going to use your code for? is that applicable in any theme available
   in wordpress?
 *  Thread Starter [skyyypilot](https://wordpress.org/support/users/skyyypilot/)
 * (@skyyypilot)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268571)
 * I’m using the Genesis theme from studiopress with a Streamline child theme. Great
   stuff!
 * I did get the problem fixed. Just needed to end the divs individually within 
   one big div. See:
 *     ```
       <div class="imageprocess">
       <img alt="" src="http://appliedcolors.com/wp-content/uploads/2011/08/process-no-text.jpg" />
       <div class="texttitle1">
       <p>Step 1:  Fill Deep Damage with Bondo Putty</p>
       </div>
       <div class="textprocess">
       <p>Paint is a poor filler:  it shrinks 85% once dry.  Filling a scratch 4, 5 or 6 times with paint, waiting for it to cure, then wetanding and buffing can take hours...not practical for a busy tech.  We created a process in which you fill deep scratches with Bondo putty using a squeegee and then use a remover chemical—Paint Leveler—to remove the excess putty.  In a few minutes you create a flat and level foundation for color-matching paint.</p>
       </div>
       <div class="texttitle2">
       <p>Step 2:  Choose a Matching Color</p>
       </div>
       <div class="textprocess2">
       <p><Bleh bleh blah blah.</p>
       </div>
       </div>
       ```
   

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Text over IMG using CSS?’ is closed to new replies.

 * 6 replies
 * 4 participants
 * Last reply from: [skyyypilot](https://wordpress.org/support/users/skyyypilot/)
 * Last activity: [14 years, 9 months ago](https://wordpress.org/support/topic/text-over-img-using-css/#post-2268571)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics