sarah ♡'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

floating images for your profile pt.1



These HTML codes utilize a base code from this layout post by Boogley. Copy & paste the code below the image preview that you want on your page into your 'About Me' section. These codes all default to have the image float fixed in the bottom right of the screen, but you can adjust the location in the code


BACK

PART 1 | PART 2




<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/NCRqmKZ/faab335c.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>







<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/zrS3qbB/image34.gif') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/ZYnG6hg/tumblr-0cd877d02cc6de63328979cf88969516-6369676b-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/Jp7QBmM/tumblr-1eca0708fced736dd9b59e7a30ee80ba-c143a51a-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/rtWS4pC/tumblr-1fdc388528f1fed0b76e348aae95888a-099134db-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/MZTtrjw/tumblr-2a0c78f227881095882a7799d8a11b94-6bf2fc8b-640.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/51fX7PV/tumblr-4a70940cf8bc2ff05fd1be56201a5bb7-d622df69-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/CBTRb83/tumblr-4df68f56610e2e7ead892552ec9c6a30-5ad87c32-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/5TJ1zY5/tumblr-7ac827dfd4d1a6584e2496ad16e76e59-235a2b63-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/3mZ80VQ/tumblr-07f50537df824d1b65ea5bb22e61153f-1151d9f0-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/G3zvRjW/tumblr-8d4de3da9a95a6cd07188b82e0c95f0d-54729a21-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/qnGtRWr/tumblr-8e0174fea51c7497f7e2f918e5b535d3-f7abd436-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/31NPyrt/tumblr-9f3cc04455d30a24e3b5e87160c6cd5e-df5f708e-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/kSNFLGQ/tumblr-9ffe06def02349e1087ae740f3c5b782-94249f0b-500.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url('https://i.ibb.co/3zsmPrh/tumblr-36b8c975b8bb9270171f89fab59293e0-53bc0d6a-1280.png') no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/G0kYv0w/tumblr-37ce953c75a4f3d19824664429359a77-4e81150a-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>






<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/WV0k3Nk/tumblr-40fda4875a0e2e14675e85b47d18cd43-3dbabdb0-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/DRfRFxJ/tumblr-45b3fc9ec09e8a1a8b40354a11b5d610-5a7611b7-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/cLdyMSD/tumblr-48b8a38f1261085cb2a4e474dcb8960b-425efa5f-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/gvvgFMd/tumblr-50d04585e69ac40e91e9f95f2ded4d2d-68336fe0-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/JzdDn4S/tumblr-65c50e7a81c406713fd8344c096cf7dc-e9dbb951-500.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/mC483w3/tumblr-82d722c0aa6d00b2bd5c73ef6f58b5f2-42ae13dd-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/f0r10YC/tumblr-97e8d4d6f6a08baf172ec6c62db264c3-d87783cb-500.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/yWr77G5/tumblr-113d03780af4bad35603e03032322de3-9062b651-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/WnrZyvN/tumblr-499e282ba1eb75217352a6ab66b7314c-b8089b1c-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/kX6g9ys/tumblr-692aec17d18acf3c014ed679ce3a1831-e61a4d08-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/7JgPyn6/tumblr-788d1fd08566f42217258c8bce203d19-39ea1d07-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/12F89GM/tumblr-1838be2a44e430dfb4762dbee50629f6-03879247-500.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/C87gvYB/tumblr-2771c5667bfcb1d3e7c98bad94d3ab0c-6462149c-640.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>





<style>
/* corner image. hidden on mobile */
.image {
    background: url(‘https://i.ibb.co/Vg0LYHt/tumblr-3507ac7e3ddff0d53d8b1e410e05395c-4bf23904-1280.png’) no-repeat;
    background-size: 100%!important;
    position: fixed;
    right: 10px;
    bottom: 10px;
height: 300px;
width: 300px;
    z-index: 1000;
    opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}
</style>
<div class="image"></div>


145 Kudos

—

Comments

Displaying 20 of 24 comments ( View all | Add Comment )

z1tok0_tan

 z1tok0_tan's profile picture

hiii! if yall r using the floating profile (like me) and the image ends up awkwardly fixed to the bottom of ur profile, i found a way to put it in the "about me" region just by switching some code!!!
on the position: fixed spot, replace "fixed" with "relative". example, my code:


.image {
background: url('https://static.wikia.nocookie.net/hatsune-miku-ultimate-costume-guide/images/e/e7/2022_Magical_Mirai_Miku_art.webp/revision/latest?cb=20240524123623') no-repeat;
background-size: 100%!important;
position: relative;
right: 10px;
bottom: 10px;
height: 300px;
width: 300px;
z-index: 1000;
opacity: 100;
}
@media (max-width: 600px) {
.image{display:none;}
}



i also am trying to find a way to add another image! though i havent been successful :( if anyone would like to help then fft! this is what i have so far:

.image-2 {
background: url(‘https://static.wikia.nocookie.net/enajoelg/images/7/7c/EnaNormal.png/revision/latest?cb=20210215040956’) no-repeat;
background-size: 100%!important;
position: static;
right: 10px;
bottom: 10px;
height: 300px;
width: 300px;
z-index: 1000;
opacity: 100;
}
@media (max-width: 600px) {
.image{display:image-2;}
}



ive noticed that if you enter this exact code, it will make room for the new image beneath the original one, but no image appears :( ill continue to work on this!


Report Comment

¡¡C4R1A!! ˚ʚ♡ɞ˚

 ¡¡C4R1A!! ˚ʚ♡ɞ˚'s profile picture

for some reason it wont work for me :( it just makes the image sit at the bottom of my page
guys what am I doing wrong?


Report Comment



its because you are using a "floating profile" :(( i had this problem once so i decided to delete the floating profile code and it suddenly worked!

by fishyy ☆; ; Report

Lucy.

 Lucy.'s profile picture

using!


Report Comment

billy ʚ₍ᐢ. .ᐢ₎ɞ

 billy ʚ₍ᐢ. .ᐢ₎ɞ's profile picture

may use one. Thank you!


Report Comment

Awildkelkinnie

 Awildkelkinnie's profile picture

HEHEHEHEHE TYSMSMMM!!!


Report Comment

★_Sh4rkK1ttyOnSt4rs_★

 ★_Sh4rkK1ttyOnSt4rs_★'s profile picture

how can i add two of them? i can only have one TwT


Report Comment

★_Sh4rkK1ttyOnSt4rs_★

 ★_Sh4rkK1ttyOnSt4rs_★'s profile picture

using only the code but for now im using only the picture. THX!! <333


Report Comment

Jo

 Jo's profile picture

using the code but not the picture <3


Report Comment

skapez ✧

 skapez ✧'s profile picture

thankz!!!! <33 x3


Report Comment

Lurm ✩彡

 Lurm ✩彡's profile picture

thank you!! <3


Report Comment

TrashySinz

 TrashySinz's profile picture

This isnt my style but its starting to be because of this, This is so cute!!!!


Report Comment

ଘangel

 ଘangel's profile picture

IN LOVE.


Report Comment

saltshaker

 saltshaker's profile picture

THXXXXX


Report Comment

LUKE-O-SAURUS!!!

 LUKE-O-SAURUS!!!'s profile picture

THANK U!!!


Report Comment

TlrJ

 TlrJ's profile picture

Waaaaa its so cute


Report Comment

dylickz ./ sanford

 dylickz ./ sanford's profile picture

OMG TY!! hugs you


Report Comment

✯Drew✯

 ✯Drew✯'s profile picture

Super cool. Using!!


Report Comment

xXkf100Xx

 xXkf100Xx's profile picture

i like the floppy disk pin


Report Comment

ness

 ness's profile picture

these are cute! i would like to add another image on the opposite side yet changing the location doesn't work if there is multiple images, it only replaces them. is there a way to have more than one image?


Report Comment



i personally haven't found a way yet no, sorry!

by sarah ♡; ; Report

MidnaiRen

 MidnaiRen's profile picture

TYSM <3<3


Report Comment