Skip to main content
paos14546995
Participant
June 7, 2017
Answered

Imagen en footer y texto enfrente

  • June 7, 2017
  • 1 reply
  • 322 views

como agregar una imagen en el footer y agregar formulario y texto enfrente de la imagen en dreamweaver

    This topic has been closed for replies.
    Correct answer BenPleysier

    The easiest way is to use a background image as per Tryit Editor v3.5

    Another way is to use style rules to place the text on top of the image as per

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

    #container {

      height: 400px;

      width: 400px;

      position: relative;

    }

    #image {

      position: absolute;

      left: 0;

      top: 0;

    }

    #text {

      z-index: 100;

      position: absolute;

      color: white;

      font-size: 24px;

      font-weight: bold;

      left: 150px;

      top: 190px;

    }

    </style>

    </head>

    <body>

    <div id="container">

      <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />

      <p id="text">

        Hello World!

      </p>

    </div>

    </body>

    </html>

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    June 7, 2017

    The easiest way is to use a background image as per Tryit Editor v3.5

    Another way is to use style rules to place the text on top of the image as per

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

    #container {

      height: 400px;

      width: 400px;

      position: relative;

    }

    #image {

      position: absolute;

      left: 0;

      top: 0;

    }

    #text {

      z-index: 100;

      position: absolute;

      color: white;

      font-size: 24px;

      font-weight: bold;

      left: 150px;

      top: 190px;

    }

    </style>

    </head>

    <body>

    <div id="container">

      <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />

      <p id="text">

        Hello World!

      </p>

    </div>

    </body>

    </html>

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!