How To Overlay Text Onto An Image In WordPress

How To Overlay Text Onto An Image In WordPress

There are different ways of achieving this, but if you are looking to overlay text onto an image in your WordPress site one option is using an HTML code with inline CSS styles. To get started, copy the code listed here and paste it into your WordPress text editing window under the “text” tab. This will not work if you paste the code under the “visual” tab.

<div style="background-image:url(http://SAMPLE-
IMAGE.jpg);background-repeat:no-repeat;"><h1 style="text-align: 
left; color: white; line-height: 28px; padding: 200px 20px 4px 
40px; font-size: 48px;">SAMPLE HEADER</h1><p style="text-align: 
left; color: darkgrey; padding: 15px 20px 400px 40px; font- 
size: 20px;">SAMPLE TEXT</p></div>  



After you paste the code, you will need to make changes to include an image of your choice, and also the text of your choice. In the code, highlight and delete http://SAMPLE-IMAGE.jpg, then enter your image there by clicking the Add Media button above the text editing window. WordPress will paste the URL for your image, and it’s measurement, but you only need the image URL so you can delete the rest. You can make changes to the text-align to center your text, or align the text to the right. You can also change the colour, font size, and padding. The padding determines the distance between your text and the edges of the image. Do note that the padding style will crop your image if the padding for the area surrounding your text is less than the height or width of the image. If you are interested in adding more features to your code, such as making the text bold, italic, or a specific font, explore this page from w3school for tips and example CSS styles. Once this is done, you will have an image with the text appearing on top of it. My sample image and its specific code can be found below.


Sample Text

<div style="background-image: 
content/uploads/2016/04/image-1-e1462432411943.jpeg); background-
repeat: no-repeat;"><h1 style="text-align: left; color: 
white; line-height: 4px; padding: 60px 35px 1px 35px; font-
size: 55px;">SAMPLE HEADER</h1><p style="text-align: 
left; color: darkred; font-weight: bold; padding: 1px 1px  
100px 35px; font-size: 48px;">Sample Text</p>  

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.