How to add background to WordPress Image Caption

Beautiful Sunflowers

As everyone knows, WordPress is the god of blogging platforms, it lets you do many things which others can’t do. Image Caption feature was introduced in WordPress 2.6 and it comes really handy when you want to put a small description or a title of the image that you are using. This is just one among the countless features that wordpress has managed to include into it’s CMS. Sometimes, an image without a background and border might look beautiful, but not when you add a caption to it. So this tutorial teaches you about how to add a good looking background and border to your captioned images.

Before getting started, just have a look at the image below that illustrates how captioned image looks with and without background.

Image courtesy: angus clyne

Now that you got a clear picture of how it looks after adding a frame-like backround to the image caption, I bet you can’t resist to add it to your wordpress theme soon.

Adding this background is made possible with the help of few lines of CSS code. WordPress has a bunch of pre-defined CSS classes. One among them is the “wp-caption”. This class is generate whenever you add a caption to any image. By default, not all the WordPress themes contain necessary codes to dress up the wp-caption class. So to dress it up, we need to declare the class in the stylesheet and add the properties.

To add the code, follow the below steps:

1. Login to WordPress admin panel.
2. Navigate to Appearance > Editor
3. Add the below code in styesheet.css at the very bottom:

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

4. Update the file and you are done. Now whenever you add a caption to your images, you get a beautiful frame-like background to your images.

Note: You cannot declare the class anything other than “wp-caption” since it is a pre-defined class by WordPress and has been built into the code.

Do let me know if you like the post and also feel free to ask me questions if you have any in the comment.