How to achieve two images one over the other using CSS and HTML?

Question

I have two images. One over the other. When I resize the browser window, the images must be placed at the same position. How do I achieve that?

Here is my html code:

  <div id="stars-container">
                <div id="star-1" class="stars"
                 data-1000p="position:absolute;opacity:0;"
                 data-1010p="position:absolute;opacity:1;"
                 >
                    <img src="img/stars/1.png" alt="">
                </div>
</div><!-- end of stars-container -->

 <!-- Pegasus bg starts -->
                <div class="pegasus"
                 data-1000p="opacity:0;"
                 data-1270p="opacity:1;">
                    <img src="img/stars/horse1.png">
                </div> 
                <!-- Pegasus bg ends -->
            </div>
           </div>

And here is its CSS:

#stars-container{
    height:60%;width:50%;display:block;
    position:relative;
    top:14%;left:20%;z-index:9; 
}
.stars{
    position:relative;
    z-index:9;
}
.stars img{
    position:absolute;
    width:100%;
}   
#star-1{top:25%;left:30%;}
#star-2{top:20%;left:33.5%;}
#star-3{top:25%;left:35%;}
#star-4{top:30%;left:39%;}
#star-5{top:29.5%;left:41.5%;}
#star-6{top:35%;left:42.5%;}
#star-7{top:35%;left:51.5%;}
#star-8{top:30%;left:52.5%;}
#star-9{top:44%;left:48.5%;}
#star-10{top:55.5%;left:47.1%;}
#star-11{top:53%;left:42%; }
#star-13{top:56%;left:37.5%;}
#star-14{top:62%;left:33%;}
#star-15{top:54%;left:42%;}
#star-16{top:49.5%;left:37%;}
#star-17{top:52%;left:33%;}
#star-18{top:51.5%;left:30%;}
.pegasus{
    width:50%;height:50%;
    position:relative;left:20%;
    top:-40%;
}
.pegasus img{
    position:absolute;
    width:100%;
}

So, basically there is an image of image of pegasus below the group of 18 stars. I am doing it for a parallax website.

You'd better place this code in your question, use Edit option — Ivan Gerasimenko, Feb 27 '15 at 08:45
Do you need images to slide like doors of closed one over another when page is being resized? — Ivan Gerasimenko, Feb 27 '15 at 08:46
@Ivan: No. I want constellation of stars(all star images) on top and an image of pegasus below the stars. — tumbleweed, Feb 27 '15 at 08:47
@IvanGerasimenko : Added the code in question as per your suggestion. — tumbleweed, Feb 27 '15 at 08:58
check other stack answer [link1](http://stackoverflow.com/questions/18235709/css-placing-one-image-on-top-of-another) and [link2](http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) — Kunal Surana, Feb 11 '16 at 09:52

score 0 · Answer 1 · answered Feb 27 '15 at 08:44

0

You could add style tag to html code.

style="position:fixed;width:36px; height:36px; left:60px;top:50px"

For you the important parameters are left(x) and top(y).

answered Feb 27 '15 at 08:44

Jure

799
6
25

Cant use position fixed. The div wont get resized that ways. – tumbleweed Feb 27 '15 at 08:48

score 0 · Answer 2 · answered Feb 27 '15 at 08:53

0

You can use following code

<style>
    .image1{
        background : url('<path to image1>') no-repeat;
    }
    .image2{
        background : url('<pat to image2>') no-repeat;
    }
</style>
<div class="image1">
    <a class="image2" href="#" style="left: 10px; top: 92px;"></a>
</div>

Above code will set image 1 as background image. I have used anchor tag for image above image1. You can use your own tag eg. img. Important thing is style that should be used is left and top. This will locate the image2 on top of image1 from 10px left and 92px top with repect to div's top, left = (0,0)

answered Feb 27 '15 at 08:53

Kunal Surana

659
5
14

Thanks Kunal. I am actually doing it in a different way, I am using image tags so as to avoid image overload on page load if defined in css. By using image tags I will run a javascript preloading function which will pick up all iimage tags and until the images are loaded, the site wont show the home page. There will only be a loading animation shown. Doing it because I am builiding a parallax website and thats how they are done. – tumbleweed Feb 27 '15 at 08:57

score 0 · Answer 3 · answered Feb 27 '15 at 09:11

Try image cross fading.

More Info and demo :here

or fiddle

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

<div id="cf">
  <img class="bottom" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-06-07-40.jpg" />
  <img class="top" src="http://addnectar.co.in/ovenfresh/ovenfresh/admin/files/products/Sunny-29-07-2014-img-07-45-01.jpg" />
</div>

How to achieve two images one over the other using CSS and HTML?

3 Answers3