Would it be possible to position an image inside each bar of a bar graph without changing the bar's size? I've figured out how to do this with text, but not with an image. Alternatively, would it be better to place the image to the left of each bar, similar to a traditional bar graph?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SF6</title>
</head>
<body>
<main>
<section id="tall">
<article class="tall">
<div>
<p>Sages <img src ="./badge/some_stuff_for_richard5.png" height="50" ><span></span><span class="tall"></span></p>
</div>
<article class="tall">
<div>
<p>prophet<span></span><span class="tall"></span></p>
</div>
<article class="tall">
<div>
<p>renegade<span></span><span class="tall"></span></p>
</div>
</article>
</section>
</main>
</body>
</html>
html{
font-size: 100%;
font-family: sans-serif;
}
body{
background-color: #1a1a2e ;
}
html,
body,
main{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content:center ;
align-items: center;
}
section{
background: #1a1a2e
}
section article.tall{
width: 500px;
height: auto;
}
section article.tall p {
color:#ffffff;
padding: 10px;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
}
section article.tall p img{
color:#ffffff;
padding: 10px;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
}
section article.tall div span:nth-child(1){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: #0f3460;
z-index: -2;
height: 100%;
width: 100%;
}
section article.tall div span:nth-child(2){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: rgb(94,227,255);
background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
z-index: -1;
height: 100%;
width: 100%;
}