Skip to main content
T
tylern54478869
Participant
February 4, 2019
Question

Aligning Text On An Image

  • February 4, 2019
  • 5 replies
  • 602 views

Is there align text on an image so that it appears on the center left or center right side of an image?  I was also wondering what code I should write if I want to align text between the center and left side of an image or the center and right side of an image?

    This topic has been closed for replies.

    5 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 4, 2019

    As a quick example, a centered container over a fixed background image.

    HTML and CSS Code:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Fixed Background</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style>

    body {

    margin: 0;

    background: #000 url(https://placeimg.com/1000/700/nature) center center fixed;

    background-size: cover;

    font-size: 4.25vw;

    }

    .container {

    background: rgba(24,3,3,0.5);

    color: #EAEAEA;

    padding: 5%;

    width: 50%;

    margin: 0 auto; /**with width, this is centered**/

    line-height: 1.5

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>My Awesome Website</h1>

    <h2>Some pithy slogan</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus harum pariatur placeat, minus rerum vero perspiciatis nostrum veniam soluta cupiditate ratione iure distinctio neque maiores numquam, molestiae voluptate ipsum unde!</p>

    </div>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    February 4, 2019

    tylern54478869  wrote

    Is there align text on an image so that it appears on the center left or center right side of an image?  I was also wondering what code I should write if I want to align text between the center and left side of an image or the center and right side of an image?

    Can you provide an image of the layout you require?  Don't know about anyone else but I'm finding it difficult to visualise exactly what you require in terms of the layout?

    pziecina
    pziecina
    Legend
    February 4, 2019

    I'm only throwing this out to you, if you follow melissa's advice and learn css/html.

    You could do this easily by making the layout, (or even just the required element) using flexbox. Using the image as a background image you would then only have to use the justify-content property in order to 'align' the text as required.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    T
    tylern54478869Author
    Participant
    February 4, 2019

    Thank you for the resource

    melissapiccone
    Community Expert
    melissapicconeCommunity Expert
    Community Expert
    February 4, 2019

    You use the images as backround in the section of the page you are working on - like the header or inside of a div. Do you know HTML and CSS? You really need to know these to design a webpage in Dreamweaver.

    Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist
    T
    tylern54478869Author
    Participant
    February 4, 2019

    I actually do know HTML and CSS.  I never, however, added picture backgrounds to websites though.

    melissapiccone
    Community Expert
    melissapicconeCommunity Expert
    Community Expert
    February 4, 2019

    I recommend you use the image as a background and place your text on top using CSS for alignment.

    Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices