www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image goes ontop of text, instead of underneath text.

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    Image goes ontop of text, instead of underneath text.

    Hi, I have the background image in.
    then P{ } style in.

    But want to add another image underneath the paragraph. The paragraph must go over the image.
    But now, the image goes ontop isntead of underneath the paragraph text.

    put in img.x{z-index;left:280px;postion:absolute;top;top:400px; width:430px; height:500px;background-image:url("../spencer/Pictures/girltemp1.png")}

    <img class="x";src="../Pictures/girltemp1.png; alt="girlfriend1.png";alt="girltemp1.png";id="girltemp1">Then the contents</p>

    Would anybody know what Im doing wrong.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    To start, your code is full of syntax errors. Don't use semi-colons (';') in your HTML. Semi-colons are used as delimiters in CSS. The rest of your code looks like it's been copied and pasted over and over and jumbled.

    Generally, when I want to create this kind of caption/overlay, I create a containing element (usually a <div>) to hold the individual elements so I can control the positioning locally with reference to the containing element.
    Code:
    <style type="text/css">
     .captionBox { position:relative; top:0; left:0; width:430px; height:500px; z-index:1; }
     .captionBox img { position:absolute; top:0; left:0; z-index:1; }
     .captionBox p { position:absolute; bottom:0; left:0; z-index:2; }
    </style>
    .
    .
    </head>
    <body>
    .
    .
    <div class="captionBox">
    <img src="../Pictures/girltemp1.png" alt="girltemp1.png" id="girltemp1">
    <p>Then the contents</p>
    </div>
    In the code above, I've set the <div> to position:relative so I can use absolute positioning on the internal elements to position them within the <div>, regardless where I insert that <div> in the page. I set the position of the <img> at the top/left of the <div> with a z-index of 1, and positioned the <p> to the bottom/left with a z-index of 2 so it's shown over the <img>.

    That should get you started, but it would be a good idea to read some tutorial on absolute positioning. Good luck!

  3. #3
    Join Date
    Apr 2012
    Posts
    110

    Thanks alot

    Hi, thanks alot. Will try that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles