Centering DIV horizontally and vertically on a background

Question

So I'm trying to code the following layout using css and bootstrap 4:

Basically DIV1 and DIV2 are part of the background and should always stay where they are, i.e. DIV1 always right upper corner, DIV2 right bottom corner.

I achieved that with:

#DIV1 {
    position: relative;
}
#DIV1 img {
    position: absolute;
    top: 50px;
    right: 25px;
    width: 20%;
    height: auto;
}

#DIV2 {
    position: relative;
}

#DIV2 img {
    position: fixed;
    bottom:-150px;
    right:-50px;
    width: 40%;
    height: auto;
}

But I can't figure out how to have the DIV3 which is not part of the background and should cover DIV1 and DIV2 if needed. DIV3 should be centered vertically and horizontally and should be responsive, i.e. should scale down on smaller screens. I'm not sure how to achieve that, would that be a use case for the bootstrap grid? Should I place the DIV1 DIV2 and DIV3 in a grid?

Please post the HTML too. – Carol Skelly Mar 31 '19 at 09:36 — Carol Skelly, Mar 31 '19 at 09:36

Libor Plíšek · Accepted Answer · 2019-03-31T10:48:41.267

Is this solution what you're looking for?

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}

#DIV1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40%;
}

#DIV2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 40%;
}

#DIV3 {
  position: absolute;
  left: 0;
  right: 140px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 35%;
  height: 50%;
}

<div id="DIV1">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV2">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV3">
    <img src="https://picsum.photos/300/300/?random">
</div>

score -1 · Answer 2 · answered Mar 31 '19 at 10:22

-1

use

position: absolute;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);

answered Mar 31 '19 at 10:22

Em.MF

303
3
11

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – double-beep Mar 31 '19 at 11:23

Centering DIV horizontally and vertically on a background

2 Answers2