Add rectangle with content inside background image - html

Question

I'm new to CSS, and I want to add a rectangle in the middle right of the image and add some content inside it
Fiddle
HTML:
<div class="MyClass__background"> </div>
SCSS:
.MyClass{
min-height: 100vh;
display: flex;
flex-direction: column;
&__background {
background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
}
So I want something like this:
Image
How can I achieve this? Regards

Answer 1

Your can find great docs here https://www.w3schools.com/css/default.asp and https://developer.mozilla.org/en-US/docs/Web/CSS
body {
padding: 0;
margin: 0;
}
.MyClass{
min-height: 100vh;
display: flex;
flex-direction: column;
/* add position relative this will prevent the children from moving out of the parent container */
position: relative;
}
.MyClass__background {
background-image: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_509107562_2000133320009280346_351827.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 100vh;
}
.rectangle {
position: absolute; /* will move the rectangle to the top left corner */
right: 5px; /* move to the right with 5px space on the right with 5px space on the right */
bottom: 50%; /* this and translate center the image vertically */
transform: translateY(50%);
border: 2px solid red;
}
/* Center and display the image & text side by side */
.rectangle-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.rectangle-content img {
margin-right: 50px;
max-width: 100% /*make the image fit in the container*/
}
<div class="MyClass__background">
<div class="rectangle">
<div class="rectangle-content">
<img src="https://picsum.photos/128/64" alt="">
<div>
<p>Some Text</p>
<p>Some Other Text</p>
</div>
</div>
</div>
</div>

Answer 2

First, you need to add .MyClass to the div. Then change your modifier class to use -- instead of __, as what you're doing is modifying the block, not creating a new element (assuming BEM)
Then, since you've already given it display:flex, all you need to do is add align-items:flex-end to move its contents to the right, and justify-content:center to vertically center its contents.
Then, add an overlay element inside the outer element. That's where you put your content.
https://jsfiddle.net/fgz8oab1/1/