Published by sarah ♡

published 1683067948
updated 1683068209

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>

131 Kudos

Comments

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

Awildkelkinnie	1711509175 HEHEHEHEHE TYSMSMMM!!! Report Comment
★_Sh4rkK1ttyOnSt4rs_★	1708290382 how can i add two of them? i can only have one TwT Report Comment
★_Sh4rkK1ttyOnSt4rs_★	1707932311 using only the code but for now im using only the picture. THX!! <333 Report Comment
Jo	1707751353 using the code but not the picture <3 Report Comment
skapez ✧	1702072411 thankz!!!! <33 x3 Report Comment
Lurm ✩彡	1689780660 thank you!! <3 Report Comment
TrashySinz	1684761133 This isnt my style but its starting to be because of this, This is so cute!!!! Report Comment
ଘangel	1684662337 IN LOVE. Report Comment
skibidi fan	1684595267 THXXXXX Report Comment
LUKE-O-SAURUS!!!	1684576416 THANK U!!! Report Comment
TlrJ	1684436915 Waaaaa its so cute Report Comment
INFRARED	1684422582 OMG TY!! hugs you Report Comment
✯Drew✯	1684415160 Super cool. Using!! Report Comment
xXkf100Xx	1684361816 i like the floppy disk pin Report Comment
ness	1684181502 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 ♡; 1684193387; Report
MrcleAligner	1683994061 TYSM <3<3 Report Comment
Sam	1683970088 YOU ARE A LIGHT TO THIS WORLD!!! Report Comment
arie eksdee!!	1683940833 this is so awesome!! Report Comment
ଘ(ano)ଓ	1683585003 THANK YOU!!! Gonna use later \(=^.^=)/~ Report Comment
justify	1683068979 >> this was so helpful and an easy read, thank you for sharing this! ■ Report Comment