How to put Caption Text on Top of an Image

Gary Eckstein WordPress 0 , , , , , , ,

As many of my regular readers know, I often implement customers WordPress Websites using the Suffusion Theme by Sayontan. There are very many configuration options available with Suffusion and it is relatively simple to get a great functioning Website that looks totally unique. Even although the Suffusion Theme has so many options it is still necessary occassionally to do some CSS tweaks to get a specific style or look.

Recently a customer requested that they have text on top of an image with the text being black on an orange background. There are numerous means of achieving this and, for Page-load speed and SEO purposes, it is always preferable to display the text as, well, text, rather than embed the text as part of the image itself (so that search engines can read the text easily as well as text loading faster than images).

So how do we change the styling so that the text is transposed on top of the image and has a coloured background?

Tutorial to Put a Caption in front of Image

The trick in WordPress is to use the Caption field that is available when inserting (or editing) an image. We then use a bit of CSS to place the caption text in front of the image as well as add a background colour behind the text (also making the background color slightly transparent). Again, achieving the required results is far quicker (and consistent) using CSS than saving text as an image and there are SEO advantages to using the CSS methodology.

Here are the steps (amend the CSS to suit your needs):

  1. Insert your Image into your Post or Page.
  2. Make sure that you have entered text into the Caption field when adding your image.
  3. Add the following to your stylesheet (in the Suffusion Theme add this into the textarea at Appearance -> Suffusion Options -> Back-end Settings -> Custom Includes -> Custom Styles):
    .wp-caption{
padding-bottom:10px;
padding-top:30px;
position:relative;
}
p.wp-caption-text {
position:absolute;
left:3%;
right:3%;
padding:10px 10px 10px 10px;
background:#ffcc66;
color:fff;
font-style: normal;
opacity:0.8 !important;
bottom:6%;
}

You’ll now have your Caption text transposed over a coloured and opaque background that is on top of your image such as shown in the images below:

Before amending the CSS, in the WordPress Suffusion Theme, the Caption text is below the imageUsing the instructions we have place the caption text in front of the image

 

Variations of this CSS may be used to style other aspects of your Website. With CSS3 (and HTML5) there are now many more means of styling content using CSS and HTML rather than relying on images. The opacity element, although supported in all major Internet Browsers, has only been released in CSS3.