ARTICLE AD BOX
I am working on my first website, and I am at the stage of adding decorative overlays. My problem is that getting the image to track to and fill specific boxes is eluding me.
HTML:
<div id="flex"> <aside id="leftSidebar" style="margin-right: 10px;"> <img class="Side_Overlay" src="images/Border_Thick.png" alt="Side Overlay image"> <h2>Music</h2> <div class="box"> <ul style="padding-left:10px;"> <p>Musical Inspirations</p> <li>Dry Bones Coarse: Mario Kart World</li> </ul> </div>CSS:
.Side_Overlay { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Ensures the overlay is above the base image */When I set position to absolute, the image fills the entire webpage. When I set it to relative, it shoves the rest of the leftsidebar aside down.
enter image description here <-- Formatting under Relative here
I want to get the border image to follow the box (It's fine if it stretches, a little jank is fine for this project).
