images outside of boxes

main .left:after{

content:"";

height:100px;

width:100px;

background:url("LINK.JPG");

background-size:contain;

display:block;

margin:0 auto /*this line centers the image but you can remove it*/

}

And adjust the height and width as you like Let me know if you have any problems with it

THANK YOU SM VOGEL

adding to the question: is there a way to have “floating” blinkies or images?

I guess you mean floating as in, they're not confined to an area and
can be placed wherever? Generally yes but how you go about it is up to
you. I would make an ID for each of your floating images which might not
be the least amount of code but I think it's easiest to understand and
modify.

By the way, you can change position:absolute to
position:fixed. Fixed will remain on the screen even if you scroll. I'm
not sure which you want or if this is even what you're asking for so
forgive me if I'm being dumb hahaha

<.img src="link.jpg" id="float1".>

minus the periods^ then within your <.style.> code:

#float1{position: absolute; left: 100px; top: 100px; pointer-events: none}

If you have more than one floating image I would continue with #float2, #float3, changing the IDs accordingly in your HTML

As
an example this image would be placed 100px from the left, and 100px
from the top. Changing the values will allow you to place it anywhere
you want on the screen though keep in mind you wil want to simulate a
phone or check from your phone to make sure it looks okay on there too.
The following code can allow you to set a different position for phone
users or you can use display:none to hide it on mobile

@media only screen and (max-width: 800px){

#float1{left:50px; top: 0px}

}