I've placed a "shadow" (just a png file made on procreate) behind a set of three icons so they're visible against my background. The icons are position: fixed; and so is the shadow (position:fixed;), but the shadow does not shift its position when I adjust the screen size on the X plane (change screen's width). I'd like for the img with class "helpbar" to move with the icons when the width of the screen is adjusted.
I'm brand new and self-taught w/ HTML/CSS. Let me know if I excluded any details that may be relevant.
TL;DR
***DESIRED BEHAVIOR: img class "helpbar" should move with icons at the top of the page.
***PROBLEM: img class "helpbar" does not move when window's width is decreased.
window width is decreased, icons move, img with class "helpbar" does not move with icons
How icons and img with class "helpbar" should look irrespective of window size
<body id="body" class="light">
<div id="groupHead">
<img type="image" viewBox="0 0 24 24" class="helpbar" src="Shuffle_SHADOW.png">
<div class="shapes">
<img id="handy-hover" viewBox="0 0 24 24" src="311032.svg" alt="HANDY_SVG" fill="none" width="24px" height="24px">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12"/>
</svg>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0L14.6942 8.98278H23.4127L16.3593 14.5344L19.0534 23.5172L12 17.9656L4.94658 23.5172L7.64074 14.5344L0.587322 8.98278H9.30583L12 0Z"/>
</svg>
</div>
</div>
</body>
CSS:
.helpbar{
position:fixed;
transform: translate(390px, -405px) scale(.39);
transition: var(--transition);
overflow-x: visible;
}
#groupHead {
overflow-x: visible;
position:relative;
width:calc(100vh - 100px);
}
.shapes svg {
position: fixed;
top: 100px;
transition: var(--transition);
fill: var(--clr-primary);
width: 24px;
height: 24px;
}
.shapes svg:first-child {
right: 100px;
}
.shapes svg:nth-child(2) {
right: 150px;
}
.shapes svg:last-child {
right: 200px;
}
.shapes img {
position: fixed;
top: 100px;
transition: var(--transition);
fill: var(--clr-primary) !important;
width: 24px;
height: 24px;
right: 100px;
}
.light {
--clr-primary: #000;
--clr-secondary: black;
--position: relative;
background-repeat:no-repeat;
--clr-dots: #00000066;
z-index: 3;
}
body {
background-color: var(--clr-secondary);
background-size: cover;
background-attachment: fixed;
height: 100vh;
padding:.5;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
position: relative;
}
I've tried screwing around with the position property, but I haven't had much luck...not sure what the fix is after poking around the stacks :(. SOS.