Dashboard Portal

Apr 26, 2023#代码片段616

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This code is used to customize the appearance of a header section on a webpage. It includes CSS code that sets a background image and adjusts padding. The code can be modified to fit individual preferences. The provided links show examples of how the customized header will look.

Get Name#

Main Code#

Note that you need to replace Alex-Programer with your own.

If you have customized styles, please adjust them accordingly.

header>div:nth-child(2)>div:nth-child(2) {
    padding-bottom: 200px;
    background: url(https://xlog-card.vercel.app/api/Alex-Programer?theme=light) no-repeat;
    background-position: bottom;
}

html.dark header>div:nth-child(2)>div:nth-child(2) {
    background: url(https://xlog-card.vercel.app/api/Alex-Programer?theme=dark) no-repeat;
    background-position: bottom;
}

@media only screen and (max-width: 768px) {

    header>div:nth-child(2)>div:nth-child(2),
    html.dark header>div:nth-child(2)>div:nth-child(2) {
        background-size: contain;
        padding-bottom: 110px;
    }
}

Display Effect#

WX20230426-182932@2x

WX20230426-182949@2x

Supplementary#

You can adjust the items to be displayed on the card by yourself. You can refer to https://xlog-card.vercel.app/ for more information.