Question posted in 
Im Trying to create a paragraph that is inside a two divs and where there is a decoration on each side. I can get this to work with absolute pixel Values but trying to make it responsive with relative (percentual) values is not working for me. It should look like this:
I am trying to have a green div as background with a padding, a white div where the paragraph element will be and and between that the same picture left and right, one rotated. Im using the .green-frame as relative container to position the decoration absolute. I wanna have the decoration fixed to the side of the white div.
From my understanding it should work with top: 50% and left/right: ~10% to position the images in the middle and ~10% under the white div. But in practices it works totally different then i expected. To position the image in the middle it takes 20%-25% and left/right is 0. When i change the screen size the images moves more under or over the white div. I am trying to get it stick to the side.
I tried with sticky and ::before and ::after with background-image of the div, i made a fiddle where i show my code. somehow i had to flip the right image in the element since putting it in .righ-deco puts the image at the top. How can i have the deco elements to keep in the middle an allways at a fraction under the .text-frame?
.green-frame {
position: relative;
width: 100%;
padding: 1rem;
margin: 0 auto;
background-color: #228B22;
z-index: 0;
}
.text-frame {
position: relative;
background-color: #FFF;
width: 90%;
margin: 0 auto;
z-index: 2;
}
.left-deco {
position: absolute;
left: 0;
top: 20%;
z-index: 1;
}
.right-deco {
position: absolute;
right: 0;
top: 20%;
z-index: 1;
}
p {
padding: 1rem;
}<div class="green-frame">
<div class="left-deco">
<img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="left-deco">
</div>
<div class="text-frame">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="right-deco">
<img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="right-deco" style="transform: scalex(-1);">
</div>
</div>
2
Answers
You can use object-fit and eventually object-position and make each img 100% of height’s container and around 120px of width.
take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Idea in the snippet below:
Two
background-imagesThe HTML is simplified down to a
<p>nested within an<article>which is nested within the<main>.The
<p>is centered vertically and horizontally as a flex-item as is<article>being the flex-container for<p>and the flex-item of<main>.There are two
image-backgrounds in<main>. One is positioned left and center and the other is positioned right and center.<article>floats above<main>withz-index: 1.box-shadowwas applied to<article>for depth (optional).The
font-sizeof:root(aka<html>) is3vmaxwhich is either 3/100th of the viewport width if the viewport width is larger than viewport height and vice versa. Allremunits are relative to the:rootfont-size. So whenever the window is resized, all lengths inremwill scale automatically. In the comments there is an alternativefont-sizethat uses the CSS functionclamp().View in Full page mode and resize the window.