7 Divs with background and Image each

Question

I am trying to make this design

and I already have except for the IMAGE on each div.

How can I position the images on that position?

I am using this code

.image {
  position:absolute;
  width:100px;
  top:33%
}

but my problem is on responsive, it does not stay on that position. This is my code that I have.

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden;
  margin-left: -1px;
}

#main > * {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s cubic-bezier(.4,0,.2,1);
}
#main > *:hover {
  background-color: rgba(255,255,255,.35);
  cursor: pointer;
}
#main > *:first-child {
  height: calc((100vw / 2) - 1px);
}
body {
  margin: 0;
}

@media (max-width: 539px) {
  #main>* {
    width: calc((100% / 2) - 1px);
    height: calc((100vw / 2) - 1px);
  }
  #main>*:first-child {
    height: calc(100vw - 1px);
  }
}


.icon {
       position:absolute;
      width:100px;
      top:33%
}

<div id="main">
  <div> 
   <img class="icon" src ="http://via.placeholder.com/350x150">
    Excellence 
  </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">
    Quality </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Efficiency </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Creativity </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Faith </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Effectiveness </div>
  <div> <img class="icon" src ="http://via.placeholder.com/350x150">Teamwork </div>
</div>

Would be a lot easier to have 7 elements with a white border on top of an element with the entire background. — James Donnelly, Mar 27 '18 at 12:43
This will be a pain in the ass and probably not responsive. I'd do as James recommended. — Phiter, Mar 27 '18 at 12:44
@JamesDonnelly i was adding other duplicates ... his issue is keeping the image inside their div which is equivalent to keep them centered and then he can play with margin if he don't want a perfect centering. And there is a lot of Dup for that — Temani Afif, Mar 27 '18 at 12:45
@JamesDonnelly and check his codepen he's already having 7 element above one background ... and his issue is with the image inside each element — Temani Afif, Mar 27 '18 at 12:46
@TemaniAfif CodePen is blocked at my office. The content of the question doesn't make this appear to be a duplicate. — James Donnelly, Mar 27 '18 at 12:49
@JamesDonnelly is a perfect duplicate because i checked the pen ... and the issue is with the image positionned absolute inside each div .. i don't close question without reading carefully — Temani Afif, Mar 27 '18 at 12:50
@JamesDonnelly i created a snippet with his code, so you can check it now and see his real issue — Temani Afif, Mar 27 '18 at 12:52
By the way guys, my code snippet is responsive, even on mobile, my only problem is the IMAGE on each DIV when I resize the browser. it should on that position even resized. — Dave, Mar 27 '18 at 12:55
@JamesDonnelly yes you have issue with the image which was the puporse of the duplicate, but now check my answer below and you will get it fixed — Temani Afif, Mar 27 '18 at 13:00

score 2 · Accepted Answer · answered Mar 27 '18 at 12:57

You can adjust the code like this.

You need to make the parent div position:relative and center the image using margin:auto. Then you can add some translation to adjust the position.

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover;
  overflow: hidden;
  margin-left: -1px;
}

#main>* {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .4s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

#main>*:hover {
  background-color: rgba(255, 255, 255, .35);
  cursor: pointer;
}

#main>*:first-child {
  height: calc((100vw / 2) - 1px);
}

body {
  margin: 0;
}

@media (max-width: 539px) {
  #main>* {
    width: calc((100% / 2) - 1px);
    height: calc((100vw / 2) - 1px);
  }
  #main>*:first-child {
    height: calc(100vw - 1px);
  }
}

.icon {
  position: absolute;
  width: 100px;
  margin:  auto;
  transform:translate(0,-30px);
}

<div id="main">
  <div>
    <img class="icon" src="http://via.placeholder.com/350x150"> Excellence
  </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150"> Quality </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Efficiency </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Creativity </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Faith </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Effectiveness </div>
  <div> <img class="icon" src="http://via.placeholder.com/350x150">Teamwork </div>
</div>

WOW! that's awesome! What this code mean transform:translate(0,-30px); ? — Dave, Mar 27 '18 at 13:00
@JohnDaveManuel the image is centred so by adding a translate i push it back to top by 30px so -30px from the center ... you can adjust as you want this value ;) — Temani Afif, Mar 27 '18 at 13:01
I see. Thank you guys! I have been stuck in here for couple of hours — Dave, Mar 27 '18 at 13:11
Hello! I like to ask what I need to change in CSS if I want to put "EXCELLENCE" part on the right instead in left — Dave, Apr 04 '18 at 02:04

7 Divs with background and Image each

1 Answers1