How to center one photo over another photo by CSS

Question

I could put one photo over another photo by below code but it is not exactly on center of another photo. if foreground photo is bigger than background photo. it should automatically resize to fit center as well. how could i achieve this effect? any hints will be more than welcome!

<!Doctype>
<html>
<head>
    <style>
        .background
        {
            position:relative;
            top: 10px;
            left: 10px;
            z-index: 1;
            margin:  0 auto;
        }
        .foreground
        {
            position:absolute;
            top: 25px;
            left: 25px;
            z-index: 2;
            margin:  0 auto;
        }
    </style>
</head>
<body>
<img src="frame.png" class="background" >
<img src="foreground.png" class="foreground">
</body>
</html>

You can't position a sibling in relation to another. Use a wrapper and position the one of the children. — Paulie_D, Aug 08 '17 at 14:52
See this question https://stackoverflow.com/questions/37485593/css-center-any-image-in-div/37485686#37485686 — Nenad Vracar, Aug 08 '17 at 14:54

score 0 · Answer 1 · answered Aug 08 '17 at 15:01

You could achieve it by few ways. But as your classes mention you are probably looking for background and foreground images for a div. You should try something like this

<body>
  <div class="container">
    <img src="foreground.png" class="foreground">
  </div>
</body>

and style it with css using:

.container{ 
    background-image: url("frame.png");
    background-size: cover;
}

and if your img size is changing try add:

    img {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

check also: How to make an image center (vertically & horizontally) inside a bigger div

thanks for suggestion. i tired out, it does not work – stewchicken Aug 16 '17 at 11:42 — stewchicken, Aug 16 '17 at 11:42

score 0 · Answer 2 · answered Aug 08 '17 at 15:02

Here's an example I just made, create a nested div and have the image be their backgrounds. Center the nested div and give them each some sort of height and width. If you want your foreground image to be shrink if larger, if you give the foreground image a percentage width, it will never be larger than the parent.

.background{
  height:400px;
  width:100%;
  display:block;
  background-image:url("http://www.fillmurray.com/400/900");
  background-size:cover;
  background-position:center center;
}
.foreground{
  height:300px;
  width:50%;
  display:block;
  margin:auto;
  background-image:url("http://www.fillmurray.com/200/300");
  background-size:cover;
  background-position:center center;
    position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<!Doctype>
<html>
<body>
<div class="background">
<div class="foreground">
</div>
</div>
</body>
</html>

How to center one photo over another photo by CSS

2 Answers2