I’m going to be wrapping text around a graphic that needs to appear on top of a background image. Below is a markup of the goal. This is going to be paired with Paul’s animated parchment tabs which I will correct on my own and I’m going to attempt <shape-outside: polygon> around the image of Merton sitting in repose on my own as well. I’m only uncertain about how to place the bottom graphic. I basically want it to sit on the parchment’s bottom edge — no longer — then a 6rem margin of the white viewport. In other words, I don’t want Merton sitting on the very edge of my viewport! 
Thank you for your help as always. Edit — Sorry I forgot my code!
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>The Martyrdom of Thomas Merton by semicodin ᰄ with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
#counter {
margin-top: 2.5rem;
text-align: center;
position: absolute;
bottom: 0;
max-width: 100%;
}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.cent {text-align: center}
.undr {text-decoration: underline}
/*▬▬▬▬ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://assets.codepen.io/74047/PARCHMENT-A.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr{
pointer-events:none;
}
.ctr a{
pointer-events:initial;
}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {
z-index: 3;
}
.ctrmid {
z-index: 2;
}
.ctr3 {
z-index: 1;
}
.ctr2 .tab:before {
flex: 0 0 65px;
}
.ctr3 .tab:after {
flex: 0 0 65px;
}
/*
.ctr2 .tab span *,
.ctr2 .tablabel3:before {
background: var(--tab1color);
color: #000;
}
.ctr2 .tab:before,
.ctr2 .tab:after {
box-shadow: 0 34px var(--tab1color);
}
.ctr3 .tab span *,
.ctr3 .tablabel3:before {
background: var(--tab3color);
color: #000;
}
.ctr3 .tab:before,
.ctr3 .tab:after {
box-shadow: 0 34px var(--tab3color);
}
*/
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ━━━━━━ BACKGROUND & POEM-A ━━━━━━ */
.indent {
margin-left: 6.26rem
}
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.redlink a:link {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.leada {
color: black;
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
1 }
.leadb {
text-align: center;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'crete round', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
.rip {
margin: 0 auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 5% 0rem 5%;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
.death {
margin-top: 1.57rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczPDfvwqDW1yEvPWS6t1OTvdSjSgqtx6_Jy04wSepKB4uTpQxjaWCLQ-_E6aauI6dBWM_ceLLqzSxXVUTmY2paWa1wTDNUbRiOdYfE4w7iTpL3UkJg=w1080-h1620');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
.foot {
color: #ffffee; ?/* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<main>
<!-- 3 TABS: add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs threetab">
<a class="svgtab1" href="#">
<span>Three Tab</span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab2" href="#">
<span>Three Tab</span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab3" href="#">
<span>Three Tab</span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
</nav>
<div class="parch">
<div class="begin">
The Murder of Thomas Merton
</div>
<div class="cent">
<table class="rip">
<tbody>
<tr>
<td>1915</td>
<td>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300">
</td>
<td>1968</td>
</tr>
</tbody>
</table>
<div class="death">
<span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
<br>
<br>
Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, “which had bled considerably.” Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
<br>
<br>
He was 53 years old.<br>
<br>
His body was flown back to the United States on board a US military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.<br>
<br>
In 2018, Hugh Turley and David Martin published The Martyrdom of Thomas Merton: An Investigation, presenting the evidentiary record’s refutation of claims of accidental electrocution, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley — <i>Thomas Merton’s Betrayers: The Case Against Abbot James Fox</i> — and Author John Howard Griffin, presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</div>
</div> <!-- ending main -->
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="anitab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</div><!-- closing counter -->
</div><!-- closing parchment -->
</body>
</html>
It looks exactly as you want it to be. Just adjust the margins to suit.
