Margin Images

Question

I see many people who have GIFs and images in the margins of their profile, rather than in text boxes like all of mine. How do is make GIF files hover there, "above" my profile rather than integrated into my text boxes?

Report Topic

Answer

To put GIFs or images in the margins so they float outside your normal text boxes, you need to use CSS absolute positioning.

Here is how to do it:

1. Add this HTML to your bio/profile text:

HTML

<div class="floating-sticker"></div>

2. Put this code in your CSS style block:

CSS

.floating-stylesheet {
    position: absolute;
    top: 200px;  /* Change this to move it up or down */
    left: 50px;  /* Use 'right: 50px;' if you want it on the other side */
    width: 100px;  /* Width of your GIF */
    height: 100px; /* Height of your GIF */
    background-image: url('YOUR_GIF_URL_HERE.gif');
    background-size: cover;
    z-index: 1000; /* Keeps it on top of your profile */
}

position: absolute; takes the image out of the normal text flow so you can place it anywhere.
z-index makes sure the image floats on top of your background instead of hiding behind it.

Permalink Report Reply

« Back to the HTML Forum

Margin Images

Posted by Baz

1 Reply

Reply by 🎀 𝐿𝓊𝒸𝓀𝓎𝐿𝑒𝒶𝒻 🎀