Databases
StackOverflow2013
Postsdbo
POLayering images using CSS and absolute positioning
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLayering images using CSS and absolute positioning
    text
    copied!<p>I have a webpage, where I am wanting to layer 3 images accordingly to act as a backgound so content can be placed on top. The images shouldn't move when scrolling, so fixed position wouldn't work. Below is the sequential order they should appear from back to front (1-3)</p> <ol> <li>img - sky.jpg which I set as the background image in the html.</li> <li>img - backDrop.png which is set above the sky.jpg.</li> <li>img - BtmRight.png which I want to position above all images and bottom right.</li> </ol> <p>Both images (backDrop.png, BtmRight.png)are set with absolute positioning and z-index to determine order. I cant get BtmRight.png image to appear bottom right above other images. I want the bottom right image to stay in place when you scroll the page. I would also like the content to appear over all the images. Below is my HTML/CSS, Is there something I'm missing?</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; html { height: 100%; margin: 0; padding: 0; margin-top:100px; background: url(sky.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } body { height: 100%; margin: 0; padding: 0; } #imgBack { width: 100%; margin-top:100px; position:absolute; z-index:20; border:#0FF thin solid; } #imgBtmRight { position:absolute; z-index:50; bottom:0; right:0; } &lt;/style&gt; &lt;body&gt; &lt;img id="imgBtmRight" src="BtmRight.png" width="413" height="283" /&gt; &lt;img id="imgBack" src="backDrop.png" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Any light on the subject, or assistance would be greatly appreciated. Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload