A reader asked if it’s possible to put text on top of an image in WordPress. Actually, the reader asked if it is possible to set an image behind text in WordPress, which is another way to put it.
Either way, the answer is yes! You can do it if you use the WordPress HTML editing window and a little bit of HTML and Cascading Style Sheets (CSS) code. You can watch the video tutorial for this below.
Here’s the code for this example. Paste this into your HTML editing window. Replace the image URL in the example with a URL for an image you want to use, and BOOM!
Text on top of image code. Right click to open or save the file.
This HTML and CSS code is basic stuff that works on any web page, not just a WordPress page or post.
You can increase or decrease the height, width and padding values to work with your image. You may need to change the color of the text so it’s readable over the image. This sample text is colored black using the CSS “color:black;” as shown above.
For more about background images and Cascading Style Sheets, see w3schools.com.
This is a Sample Headline
This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.
How to Put Text on Top of an Image – or Set an Image Behind Text
Filed under: WordPress Tutorials | Tagged: WordPress, text, intermediate, WordPress Tutorials, image, CSS, WordPress Examples, custom |
Free WordPress Tutorials - Business Blogging 101 
I would like to see a video tutorial on this!!!
I enjoy your blog and the great job you do at explaining how tos…
Thanks for all the help!
Thanks, bloggingforbussiness101! There you go.
Your request made me realize that the code I had put in the post was probably not working right (due to the way WordPress writes certain characters from HTML), so hopefully the Word doc containing the code will solve that problem. You should be able to download it, open using Word, and then copy and paste into the WordPress HTML editing window. Let me know if you have any trouble.
At some point I will do a follow up to show how to tweak the padding values, etc. In the meantime, check out
http://www.w3schools.com/css/css_background.asp
Mark M.
thanks mate
I folded your image behind text article and I got it to work for safari, but it doesn’t work for internet explorer and fire fox. Can you help me out?
@pdsurfer
Thanks for your question. That is odd. I tried a few things to get it to show in Firefox, but no luck. The HTML and CSS you are using is correct. There must be a conflict in the CSS somewhere. I will take a closer look when I have a minute, maybe over the weekend.
If you want to try some tests, see if you can place a background image anywhere on the page, inside a <p> or <h1> tag or whatever (the simpler, the better), to see if that shows up in Firefox/IE. It’s process of elimination.
I usually open View Source. Select All and then paste into a text file. Save it as a .html file, and then you can work with that file rather than having to mess with saving every time to WordPress in order to see if your changes made a difference.
I’m trying to implement your style above. I noticed your file name is “http://bit.ly/2JOum3”. I paste that into a new window and it shows the file name is actually:
So how did you come up with the first ‘new’ image reference and what is the relationship between them?
If I paste my file reference into your code, no image shows up.
My image is http://www.sysnetservices.net/wp-content/uploads/2012/04/GearsBlue600.png
But I cannot get it to display as background.
But it shows as a regular image if I just use it as just an href link.
Any thoughts?
Thanks,
Dave
@leblon1967 That’s correct. You need to replace http://bit.ly/2JOum3 with http://www.sysnetservices.net/wp-content/uploads/2012/04/GearsBlue600.png Check to make sure you haven’t deleted any ” or other code in the div.
You might want to do a “Save page as…” of the WordPress page to your computer using your browser. Right click on the page in your browser and choose “Save page as…” or “Save file as…” Then open the saved HTML page in your browser to view it — and open the same file in a text editor, and work on the code there so you don’t have to keep saving the WordPress page to see if the changes work.
Once you get it to work, you can take the final changes and put them into the WordPress page.
Dear Mark,
This is very nice and great code, Thanks.
But can you tell me if The Image and the text has to be displayed in the center ?? Then What
and If i don’t wanna mention image size for full size image then what will be changes in the code.
Sumit Jain
@sufin – You can modify the CSS for the div that contains the image to put it in the center of the page or align right. You need to have dimensions for the div or the image in order to give the element some size on the page. If you don’t want to specify the image size, try adding width and height properties to the div containing the image.
I am sorry to say but I am not a coder; could you illustrate in your own code; if this apple has to be in center.
This is a Sample Headline
This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.
@sufin – If you open the code file (link above) you will see
<div style=”background-image:url(http://bit.ly/2JOum3);background-repeat:no-repeat;height:200px;width:200px;margin-top:20px;”>
Add to this
margin-left:150px;
Like so
<div style=”background-image:url(http://bit.ly/2JOum3);background-repeat:no-repeat;height:200px;width:200px;margin-top:20px;margin-left:150px;”>
And you can adjust the 150px value so that the image div is centered on the page. This is not ideal in some cases. Using text-align would be better, I think, because that would center the div regardless of the width of the column. However it works fine in this case because the column width is fixed, and I could not get text-align to center the image div.