Responsive image in a div responsive? - html

Question

I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.

Answer 1

This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>