User:Jimothy/Testing

From Super Snail Wiki
Jump to navigation Jump to search

Test Page

Testing Icon Frame as Background Image

Trying to put a background for icons.

Background:

White-item-frame.png

Direct image url:

https://supersnail.wiki.gg/images/9/92/White-item-frame.png


Attempt 0: Using user CSS

https://supersnail.wiki.gg/wiki/User:Jimothy/common.css


75px

Decor Coin.png

30px

Decor Coin.png


Decor Coin.png

Attempt 1: Relative Url

Attempted Code:

<div style="
    background-image: url(/images/9/92/White-item-frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 220px;
    max-height: 220px;
    aspect-ratio: 1 / 1;
    width: fit-content;
    height: fit-content;
    padding: 30px;
}">[[File:Decor Coin.png|75x75px]]</div>

Renders:

Decor Coin.png

Attempt 2: Full Url

Attempted Code:

<div style="
    background-image: url(https://supersnail.wiki.gg/images/9/92/White-item-frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 220px;
    max-height: 220px;
    aspect-ratio: 1 / 1;
    width: fit-content;
    height: fit-content;
    padding: 30px;
}">[[File:Decor Coin.png|75x75px]]</div>

Renders:

Decor Coin.png