WordPress.org

Ready to get started?Download WordPress

Forums

placing text over an image (16 posts)

  1. medicalbillsupport
    Member
    Posted 1 year ago #

    HI,

    I'm a brand new wordpress user . I have images on my pages and I want to add text on top of the images. Is there a plugin to place text over an image? I know I could edit my images in word and add text but I'd prefer not to do that if there is an easier way. I want add text in the middle of my images not below it as a caption.

    Thanks for your suggestions!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  3. medicalbillsupport
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. Aaron Dicks
    Member
    Posted 1 year ago #

    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.

  6. medicalbillsupport
    Member
    Posted 1 year ago #

    Hi,

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

    http://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:

    http://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!

  7. ModularBase
    Member
    Posted 1 year ago #

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

  8. dawnthinker8
    Member
    Posted 10 months ago #

    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

  9. Rene Cerrito
    Member
    Posted 7 months ago #

    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

  10. virendra930
    Member
    Posted 7 months ago #

    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

  11. virendra930
    Member
    Posted 7 months ago #

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

  12. Rene Cerrito
    Member
    Posted 7 months ago #

    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

  13. anguscarter
    Member
    Posted 6 months ago #

    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(http://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

  14. medicalbillsupport
    Member
    Posted 6 months ago #

    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="http://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="http://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!

  15. anguscarter
    Member
    Posted 6 months ago #

    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(http://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

  16. anguscarter
    Member
    Posted 6 months ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags