How to display caption ON Image

[Max]

Hi Tom,

I inserted an image to a blog post and want to display the caption of this as well as the captions of all other images I am posting to my site ON the image.

It should look like the following:

http://www.artofblog.com/wp-content/uploads/2011/10/WordPress-Header-Image-Site.jpg

I figured a way to show the caption on the image based on some posts I found in the forum. My actual status is this:

.wp-caption .wp-caption-text {
background: transparent;
padding: 80px 350px;
text-align: center
color: #ffffff;
position: absolute;
font-size: 45px;
}

The result is this: https://postimg.org/image/e4ycz24l5/

What I want: The caption should always be displayed in the center of the image. Also it should be displayed in one line. Furthermore, is it possible to change the style, for example make the caption a h1-headline?

Thanks a lot!

Cheers!

[Tom]

Hi there,

Interesting – is there any way you can link me to that page?

You could theoretically change the caption text to be an H1, but doing so would make it so any other caption you use on your site (maybe just with a regular picture on a page) would have it too.

You can learn more about that on this page under the “Customizing the caption output” section: http://justintadlock.com/archives/2011/07/01/captions-in-wordpress

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Hi,

thats totally fine for me. The caption should always be displayed in the same way.

More important for me than making the caption a h1 or h2 is that the text needs to be in the center of the image every time. As you can see, the caption comes in two lines and isn’t really centered at the moment.

Therefore, do you have any custom css improvement for me? Just center the caption on any image and bring it in one line. Unfortunately I can’t show you a site because its not published yet.

Thanks

[Tom]

There could be a lot of reasons the text isn’t centered and is on two lines. I would need to inspect the code to know for sure.

Any chance you can give me a heads up when it’s view-able?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

The solution for this one is:

.wp-caption .wp-caption-text {
background: transparent;
padding: 100px;
text-align: center;
color: #ffffff;
position: absolute;
font-size: 45px;
width: 100%;
box-sizing: border-box;
}

[Tom]

Thanks for sharing! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts