Published by sarah ♡

published 1683052370
updated 1683068216

View Blog View Profile Report Blog Entry

floating images for your profile pt.2

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/DGB48Kg/tumblr-6961ef5bece1bed3c68651f03f71a6e6-0d08a45a-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/995w7Vx/tumblr-70352bc9db9c9c595604c22837ac20c3-416fa692-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/gFJFZv9/tumblr-964880492d5277dec55518a315915b57-cba58e43-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/NTPmXxq/tumblr-aa1f92b1df39d1d6b3d93d1ebd5acdf5-84db2e80-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/w6t6LKw/tumblr-ac06d92de0b2a1c208e9e72432308193-9d984fef-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/KqXmCb6/tumblr-b16806deb85a128db477d503b0abd2ac-aff986f8-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/kcq8dn2/tumblr-b570902c48029a1cc3951a82d605d95b-6a47969b-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/hFmdwHZ/tumblr-bee65e8ddaabaae69a0fd6831227d174-efcfa2e0-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/q5c38n9/tumblr-bef7d7f078f9fe805d2e86da4bb34ad7-8a6b1603-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/1mSwqPs/tumblr-c03b902446d0613ad81f6a60a5958fc3-33a4998f-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/sKgr90K/tumblr-c3f2499314467954c30f5a05086d53c1-aad5379a-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/kS05T7G/tumblr-d800e91e96fdee5af52539a55a73a8fb-0afb32db-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/8j8sZQb/tumblr-d485523fee8d1dcfc63f255e21690203-601f729a-1280.webp’) 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/8g5yNn2/tumblr-dd04ab039ec2504f706a1d7d13d59cd5-203ca424-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/jHSgfK0/tumblr-deca34bfd00ecec3b2eb283119c8146c-69fa5712-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/090575V/tumblr-e9469f52d52953efa41175410cf1b738-34b627a0-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/dKvdGx2/tumblr-ecb9e70823f462b2792f036175285f6b-5c0d0bd5-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/7VQGHBL/tumblr-f1028a934abf5445763e7e3b198a0ccb-e9a67993-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/PWQWpSg/tumblr-f006758369c007183eac71571fccbaa6-1b17d3a5-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/MCbGsPX/580ddb27-original.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/NT5WP3Q/tumblr-1a77cf2827ec6d3f3cb886aa52c0123c-3c03f651-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/kqV1SL2/tumblr-3ef73cc5494ef3f4b89fe16c65cb52ac-d7ada5ec-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/JsvHC0b/tumblr-3fa020a49e601a25fbe5d008d7e7c6ad-8ac58d4a-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/HNs0tCv/tumblr-4f8905a18ecb862d0153ef12a0ece2b9-869fdb33-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/mTZ5pQv/tumblr-8a6d0943eb7334a784f6abe124bbaf40-90082d99-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/6b1kYtR/tumblr-8af0d7bb55962a40bc1abc08a39550b6-73e653ca-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/ZRQVFrD/tumblr-051dccd31c15cc361f0f97ee3a647c1c-31c17857-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/2nb78jP/tumblr-83b0270013960b0a298b2f3018414aae-7b706d98-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/WtrPV1K/tumblr-86ffadb8b320ab313692e9f482e3193a-0486c7f2-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/dK53QCX/tumblr-89eaa6c70d683477f1ca31a65cd24307-56007e18-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/DCffvF0/tumblr-3135f7afc55e74f3e71f012b546e84d0-893b257f-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/9hwcZ8G/tumblr-15330ff5befb48ed0c101b029e5454bc-f5020c39-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/Hh3FGGq/tumblr-513566fb207b2f308c2c0c3ed06dbc6d-b8f10128-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/bsnp67M/tumblr-b625cd41dd3406448cc8c8a97cc84f3c-02733772-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/wKFDQT5/tumblr-cd2e6cc70a64684e743310f562a5c36f-3e2a1fb6-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/rw8kSjp/tumblr-e0f3150b96c5145247713ec9e259708e-1e8cd2e9-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/7VLgxwn/tumblr-e2c4504a65d5fb34e55215020986978e-3b12e6de-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>

35 Kudos