CODEWITHSUNDEEP
htmlcssionic-framework
Sarah cartenz
Sarah cartenz

Reputation: 1313

Overlapping many imgs in html

I have 7 transparent images all with the same width and same height. Then I have a background image with the same width and height as well. What I did (and want to do) is to place the background image in the main div and place all the other 7 imgs on top as you see in the code below. But the result is that the imgs actually flow out of the main div and are bigger. I tried changing my css but similar behaviour alway occurs. In addition, the background image is not in the center of the page like specified in the css. What can be my mistake?

So I got the following html:

 <div class="row wrapper">
      <div class="col container"><img ng-src="{{data.firstDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.secondDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.thirdDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.forthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.fifthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.sixthDisplay.src}}"></div>
      <div class="col container"><img ng-src="{{data.seventhDisplay.src}}"></div>
    </div>

And the following css:

img {
display: inline-block;
margin-left: auto;
margin-right: auto;
padding:0;
max-width: 100%;}

.container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;}

.wrapper {
    padding-right:20%;
    padding-left:20%;
    width: 300px;
    height: 127px;
    background: url(img/Tbackg.png)  no-repeat center;
    background-size: contain;
    position: relative;

The output looks like (note that not all images appear here but the point is shown, the background is the small image while the big ones are the individual images): enter image description here

Upvotes: 1

Views: 42

Answers (1)

Asons
Asons

Reputation: 87251

Element with margin: auto need a width, but in your case, drop the margin and set text-align: center; on the parent .container instead

If the img images height is not the same as the height set on the wrapper, you'll need to add height: 100%, or else they will not match the backgrond image's height

img {
  display: inline-block;
  height: 100%;            /*  needed if image is higher/lower than
                               the 127px set on the wrapper  */
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.wrapper {
  padding-right: 20%;
  padding-left: 20%;
  width: 300px;
  height: 127px;
  background: yellow url(http://placehold.it/127) no-repeat center;
  background-size: contain;
  position: relative;
}
<div class="row wrapper">
  <div class="col container">
    <img src="http://placehold.it/227/f00">
  </div>
  <div class="col container">
    <img src="http://placehold.it/227/0f0">
  </div>
  <div class="col container">
    <img src="http://placehold.it/227/00f">
  </div>
</div>

As suggestion would be to drop the img in favor of using a background image on the container. By doing so, the image will adjust equally with how background-size: contain works

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  
}
.wrapper {
  padding-right: 20%;
  padding-left: 20%;
  width: 300px;
  height: 127px;
  background: yellow url(http://placehold.it/127) no-repeat center;
  background-size: contain;
  position: relative;
}
<div class="row wrapper">
  <div class="col container"
       style="background-image: url(http://placehold.it/127/f00)">
  </div>
  <div class="col container"
       style="background-image: url(http://placehold.it/127/0f0)">
  </div>
  <div class="col container"
       style="background-image: url(http://placehold.it/127/00f)">
  </div>
</div>

Upvotes: 2

Related Questions