placing text over an image

Do you have the text at the moment but it’s not over the image?

I want to overlay the text “Let us help you save money” on the image on my page Our Services”.

We can’t see that page so you need to tell us whether you have that text on the page already.

Based on what you’re saying, you may find it easier to just replace the image.

There are methods of styling the caption text to appear ‘on top’ of your image, but I feel this is probably beyond the scope of what you’re prepared to do (you’ll need to learn some CSS skills).

As Andrew said – if you can give us some more information we can try to help.

Hi,

Here’s my test page done in wordpress that I would like to add a text caption over the image.

https://www.medicalbillassist.com/our-services/about-us/

Here’s an example from my website ( not built in wordpress) that shows an image with a text overlay:

https://www.medicalbillsupport.com/

I was hoping there was a plugin for wordpress that allowed me to do this easily.

Thanks for your help and suggestions!

When you click on the image on the link you provided, two images pop-up – one over the other.

recoveryfarmhouse.com

I also would like to put text on images. (not uploaded yet). I am prepared to learn code if my brain will cooperate. Actually the little bit of code I have used made me feel powerful..hee hee. Seriously I liked adding a few symbols and then getting big results! This is my first website ever and what I want to do is create pictures with catchy text phrases on them…of course I could use captions but once I start something I can’t stop till I get it right. I downloaded “Easy watermark” which would have worked fine except from what I can figure the text only appears on one line I can’t put 2 or three lines of text on one side or move it around. I wish I knew how to use code for this! I bet I could go to my text editor and stick a few symbols and my phrase between the arrows and bam! = text on pic! How does one go about learning code anyway? I love wordpress! Especially those little happy comments to me like “don’t every go away Dolly!” lol

I would like to create a page with a background image and text throughout. I do not know code. Any ideas on how to proceed? Thanks

hi medicalbillsupport,
you can do it by using css. just place your text which you want to overlay image in some span and give it particular class and apply css property position:absolute on it it`ll help you

hii Rene Cerrito,
you can add some static pages using add new page in wordpress and you can find more info here

Hi Virendra… I do know how to create pages. What I am trying to learn is: how to create a page that looks more like a poster… with a large background image with text written all over it. I want this for one page on my site only… NOT the home page. Any info on this will be most appreciated. I do not want to play with code. Thanks, Rene

Hi, I was just kinda curious about this myself because I want to have a link over a textured background image on a popup page (strange I know but I have my reasons). Anyways I came across this little code that seems to work fine. Just edit the parameters as need be and put into the text editor of a post or page…..

<div style=”background-image:url(https://bit.ly/2JOum3);background-repeat:no-repeat;height:200px;width:200px;margin-top:20px;”><h1 style=”color:black;line-height:18px;padding:20px 10px 2px 20px;”>This is a Sample Headline</h1><p style=”color:black;padding:2px 10px 10px 20px;”>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.</p></div>

Hope this helps!
-angus

Thanks Angus for your post – this is really helpful!

I am using an image that is in my wordpress library and I was wondering if I can adapt the code you provided.

Here’s how I display my image on my page:

<a href="https://www.medicalbillsupport.com/wp-content/uploads/2013/08/Man-Lost-in-Maze-with-captions.png"><img class="alignleft size-full wp-image-241" alt="Man Lost in Maze with captions" src="https://www.medicalbillsupport.com/wp-content/uploads/2013/08/Man-Lost-in-Maze-with-captions.png" width="1519" height="1519" /></a>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

Thanks for any help with this!

Hi, no problem, as many times as I’ve used these forums it is nice to be able to pay it forward for once.
I’m a little confused by a few things here but I think have it for you.
1st why the “a href” above, are you trying to have your image link to something? Or have something link to it?
2nd 1519px is pretty huge, my actual content window is only 1000px (I think, not positive) so you might want to resize that.
With that though heres the code you need to put in the text editor.

<div style="background-image:url(https://www.medicalbillsupport.com/wp-content/uploads/2013/08/Man-Lost-in-Maze-with-captions.png);background-repeat:no-repeat;height:1519px;width:1519px;margin-top:20px;"><p style="text-align: center;font-size: 100px;">Let us help you save money!</p></div>

You will need to do a few things though, 1st I could center the text horizontally on the image but could not figure how to center vertically. The only way I thought of was to hit enter before the “let us…” part several times till it got right. So you will need to do that till you get it where you want it, maybe start with 5 times. Thats just a little trial and error on your end. 2nd I guessed at a font size for you. You can change it easy enough where it says font size. 3rd if you do resize the image don’t forget to resize in the code where it says 1519 to whatever you resize it to. Finally the font will be whatever default font you have for posts but if you want a different one, just insert “font-family:Arial;” (replacing arial with your choosen font) before “font-size.”
Hope this does the trick!
all the best
-angus

Never mind what I was asking about href, my mind was else where, that does make sense. Regardless of where my mind was, the code still works, I just double checked. Sorry for my confusing comment about the link.
-angus