CODEWITHSUNDEEP
htmlcss
randomuser1
randomuser1

Reputation: 2803

How can I overlay two pictures in CSS?

I want to place two pictures at the same place on the webpage - to overlay each other (later on I'll add some webkit animations for them to move in two different directions, but the startpoint should be the same). I have the following css layout (here's jsfiddle). The CSS here looks like this:

.intro{
    background-color: #b0e0e6;
    width: 100%;
    margin: 0 auto;
    font-size: 1.5em;
    padding: 5px;
}
.intro:before,.intro:after {
    content: " ";
    display: table;
}
.intro:after {
    clear: both;
}
.image{
    width: 50%;
    background-color: #aaaae6;
    float: left;
}
img{
    margin: 0 auto;
    display: block;

}
.text{
    width: 50%;
    background-color: #cccccc;
    float: left;
}

as you can see in the fiddle, now two pictures are one below the other, so I've decided to modify the css and add this:

img{
    margin: 0 auto;
    display: block;
    position:absolute;
    left: 10%;
    top: 25%;      
}

but that causes the not visible at all... How can I preserve the size of that div and just put two images directly in it?

Upvotes: 2

Views: 1631

Answers (1)

bishop
bishop

Reputation: 39474

As a starting point for consideration: in CSS3, a single element can have multiple, stacked background images. Example:

.my-container {
  background:
    url(grid.png),
    url(building.jpg)
}

Here's a codepen.

In CSS2 and below, you can use z-index, absolute, width, and height etc.

Upvotes: 2

Related Questions