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>
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.
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!
Reply With Quote
Bookmarks