3 Replies Latest reply on Mar 3, 2016 12:35 PM by Jon Fritz II

    How do i type text onto an image.

    Cbbaozi Level 1

      How do I type text onto an image. Please tell me all the steps to get there. Thanks

        • 1. Re: How do i type text onto an image.
          Nancy OShea Adobe Community Professional & MVP

          The simplest way is to put the image into your container's background with the CSS background-image property.

           

           

          Nancy O.

          1 person found this helpful
          • 2. Re: How do i type text onto an image.
            osgood_ Level 8

            cbbaozi wrote:

             

            How do I type text onto an image. Please tell me all the steps to get there. Thanks

             

            Another option is to place an absolutely positioned <div> over the image.

             

            So you have a set up like:

             

            <div class="image-holder">

            <div class="image-text">Some text</div>

            <img src="image.jpg alt="" >

            </div>

            <!-- end image-holder -->

             

             

            CSS:

             

            .image-holder {

            position: relative;

            }

             

            .image-text {

            position: absolute;

            top: XXpx;

            left: XXpx;

            width: 100%;

            }

            1 person found this helpful
            • 3. Re: How do i type text onto an image.
              Jon Fritz II Adobe Community Professional & MVP

              Using DW's interface...

               

              1. From Design View, click the container you want the image to be in

              2. In the CSS Designer (Shift + F11 if it's not open) click the + for Selectors

              3. In the Properties section of the CSS Designer, make sure Layout (first tab) is chosen and scroll down to background-image

              4. Click the field next to url to activate it

              5. Click the Browse button (folder icon) and choose an image from your Defined Site

              6. The rest of the background image functions you like

              7. In Design View, click the empty container and add your text