Cover up your Profile Tunes box with an image

1 month ago - by Kayla⟡ - Profile Tunes Skins - used 11 times

This puts one image over the entire box so you don’t see the song, buttons, etc.

If you want the WHOLE image visible replace cover with:
background-size: contain !important;

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.

<style>
/* COVER THE PROFILE TUNES BOX WITH AN IMAGE */

#profile-playlist-mount,
.profile-playlist-mount,
#profile-playlist-container,
.profile-playlist-container {
    position: relative !important;
}

/* image overlay */
#profile-playlist-mount::after,
.profile-playlist-mount::after,
#profile-playlist-container::after,
.profile-playlist-container::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-image: url("YOUR-IMAGE-URL-HERE") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    z-index: 9999 !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 Profile Tunes Skins

« Back to Profile Tunes Skins | « All Profile Elements