CODEWITHSUNDEEP
cssimagehtml
user3219918
user3219918

Reputation: 61

How do we place image on top of another image

I want to place a picture on top of another, but i am baffled. Here is what i have done so far.

What i want to do is to place a logo.png inside main.png. But main.png is in a background image and i want to keep it that way. So how can i achieve this

HTML

<div class="ImageMain">
</div>

<div class="LogoMain">
</div>

CSS

  .ImageMain {
        z-index:1;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:url(../Resources/Images/HomeMain.jpg);
        background-size:cover;
        background-position:50% 50%;
        background-repeat: no-repeat;
    }

    .LogoMain {
        z-index:2;
        background-image:url(../Resources/Images/Main%20Logo.png);
        position:relative;

    }

I also tried this.

CSS
.wrapper {
    position:relative;
.ImageMain {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../Resources/Images/HomeMain.jpg);
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
}

.LogoMain {
    z-index:2;
    background-image:url(../Resources/Images/Main%20Logo.png);
    position:absolute;

I added the wrapper and made the logo position to absolute. I also added z index. It still isnt working.

Upvotes: 0

Views: 369

Answers (4)

tomascharad
tomascharad

Reputation: 3188

What I usually do is to include an image tag inside a div, and to add a background image to that div.

Update: I saw you solved the problem as I said, very nice! Now, to center correctly an absolute positioned div you can add negative values to each property (top, bottom, right and left) and it should work.

Upvotes: 0

user3219918
user3219918

Reputation: 61

Hurrah. I figured out how to do it with the background image. here is a fiddle http://jsfiddle.net/RFnu2/1/.

HTML

<div class="wrapper">
  <div id="MainPic"/> </div>
  <div class="Logo" >
    <img src="http://bit.ly/1jSi1Kj" id="MainLogo"/>
  </div>
</div>

CSS

#MainPic{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  background-repeat: no-repeat;
  background-image:url(http://bit.ly/1nv5VHM)
}

#MainLogo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:20%;
}

.logo {
    width:100%;
    height:auto;
}

but I couldnt figure out how to centre the logo so it would look funny, but it still works.

Upvotes: 0

ashique
ashique

Reputation: 155

Easiest way to do this:

HTML:

<div class="wrapper">
  <img src="image1.jpg" id="image1"/>
  <img src="image2.jpg" id="image2"/>
</div>

CSS:

#image1{
  position:absolute;
  top:0px;
  left:0px;
}

#image2{
  position:absolute;
  top:0px;
  left:0px;
}

at this stage image2 is already on image1. If you want image2 to be on image1 and image1 to be partially visible, add this:

#image2{
  z-index:2;
  opacity: 0.75;
}

"Opacity" makes element transparent. Here opacity:0.75 means image2 would be 75% solid and 25% transparent.

Hope this helps

Upvotes: 1

alxscms
alxscms

Reputation: 3047

What you can do is wrap the two images in a div, put its position to relative, leave the first image on display block, and put the second image on position absolute with top and left to 0.

<div class="wrapper">
  <img src="Main.jpg" alt="Home"/>
  <img src="Logo.jpg" alt="Logo" class="logo"/>
</div>

And for the css :

.wrapper {
  position: relative;
}

.logo {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

Here is a jsfiddle to illustrate the solution : http://jsfiddle.net/bYwh8/

A second solution would be to use the CSS3 multiple backgrounds, you can see an example in this jsfiddle : http://jsfiddle.net/azLPn/ and get more details here http://www.css3.info/preview/multiple-backgrounds/

Upvotes: 2

Related Questions