images fixed on all corners

1 month ago - by R1H666 - Misc - used 88 times

the code will give you images in all corners, fixed on your profile background, so when you scroll on your profile, they will stay while scrolling.
I'm shit at writing descriptions, but I hope this helps
*image address in between "" quotes
if it messes up comment on the post

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<div class="corner-image1"></div>

<style>
.corner-image1{
    position: fixed !important;
    left: 10px !important;
    top: 10px !important;

    width: 400px !important;
    height: 200px !important;

    background-image: url(""/*image address in between quotes*/) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;

    z-index: 999999 !important;
    pointer-events: none !important;
}
</style>
<div class="corner-image2"></div>

<style>
.corner-image2 {
    position: fixed !important;
    right: 10px !important;
    top: 10px !important;

    width: 400px !important;
    height: 200px !important;

    background-image: url(""/*image address in quotes*/) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;

    z-index: 999999 !important;
    pointer-events: none !important;
}
</style>
<div class="corner-image3"></div>

<style>
.corner-image3 {
    position: fixed !important;
    left: 10px !important;
    bottom: 48px !important;

    width: 400px !important;
    height: 200px !important;

    background-image: url(""/*image address in quotes*/) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;

    z-index: 999999 !important;
    pointer-events: none !important;
}
</style>
<div class="corner-image4"></div>

<style>
.corner-image4 {
    position: fixed !important;
    right: 10px !important;
    bottom: 48px !important;

    width: 400px !important;
    height: 200px !important;

    background-image: url(""/*image address in quotes*/) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;

    z-index: 999999 !important;
    pointer-events: none !important;
}
</style>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements