Report Blog Entry
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
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>
Comments
Displaying 20 of 27 comments ( View all | Add Comment )
Kami<3
Hey. So I'm doing this on mobile. Is it still gonna work because I realized something that says "hidden on mobile" on the code idk if its apart of it or if it's just because I'm on mobile so I honestly don't know if I'll be able to do it
I would do this on computer. when doing these things on mobile, i noticed the images/gifs appear on my profile editing screen too and completely become a distracted and in the way when trying to edit other things on my profile (though maybe its cause im a spacehey newbie lololols)
by ashgirbash; ; Report
Oh ok tyy
by Kami<3; ; Report
Oh ok tyy
by Kami<3; ; Report
Kami<3
Hey. So I'm doing this on mobile. Is it still gonna work because I realized something that says "hidden on mobile" on the code idk if its apart of it or if it's just because I'm on mobile so I honestly don't know if I'll be able to do it
Kami<3
Hey. So I'm doing this on mobile. Is it still gonna work because I realized something that says "hidden on mobile" on the code idk if its apart of it or if it's just because I'm on mobile so I honestly don't know if I'll be able to do it
z1tok0_tan
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!
Ohhh alr thanksss
by Kami<3; ; Report
Ohhh alr thanksss
by Kami<3; ; Report
Ohhh alr thanksss
by Kami<3; ; Report
¡¡C4R1A!! ˚ʚ♡ɞ˚
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?
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 Mossy ☆; ; Report
Lucy.
using!
grace ⋆˚✿˖°
may use one. Thank you!
Awildkelkinnie
HEHEHEHEHE TYSMSMMM!!!
★_Sh4rkK1ttyOnSt4rs_★
how can i add two of them? i can only have one TwT
★_Sh4rkK1ttyOnSt4rs_★
using only the code but for now im using only the picture. THX!! <333
Jo
using the code but not the picture <3
skapez ✧
Lurm ✩彡
thank you!! <3
TrashySinz
This isnt my style but its starting to be because of this, This is so cute!!!!
ଘangel
IN LOVE.
cloverheart
THXXXXX
LUKE-O-SAURUS!!!
THANK U!!!
TlrJ
Waaaaa its so cute
dylickz ./ sanford
OMG TY!! hugs you
✯Drew✯
Super cool. Using!!