Custom Background Image and Side Bar Image

[ZiercPro]

Checklist

• I have read and accepted the contributing guidelines.

Is your feature request related to a problem? Please describe

no

Describe the solution you'd like

I hope that we can customize the transparent background image and sidebar transparent image.

Describe alternatives you've considered

It would be better if we could set the blur and acrylic texture.

Additional context

No response

[huanyushi]

I happened to consider the same question last week and have already implemented changing the background image of the sidebar. You can visit my blog huanyushi.github.io to see the effect.

I have documented the specific setup process on my blog, which you can view Chirpy Blog Customization (However, it's written in Chinese).

To be specific, you need to add code in assets/css/jekyll-theme-chirpy.scss to modify the background image of the sidebar. This is my setting,

/* set background figure for side bar */
#sidebar {
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    width: 260px;
    z-index: 99;
    /* background: var(--sidebar-bg); */
    background-image: url( ... ); /* <- url of your background image */
    background-size: cover; /* <- customize the image size */
    background-repeat: no-repeat; /* <- no repeat */
    background-position: top; /* <- postion */
    border-right: 1px solid var(--sidebar-border-color);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

Note that when you change the background image, also consider the color of the fonts; they might also need adjustments. Additionally, I didn't modify the background of the entire blog, but the setup methods are similar.

[ZiercPro]

I happened to consider the same question last week and have already implemented changing the background image of the sidebar. You can visit my blog huanyushi.github.io to see the effect.

I have documented the specific setup process on my blog, which you can view Chirpy Blog Customization (However, it's written in Chinese).

To be specific, you need to add code in assets/css/jekyll-theme-chirpy.scss to modify the background image of the sidebar. This is my setting,

/* set background figure for side bar */
#sidebar {
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    width: 260px;
    z-index: 99;
    /* background: var(--sidebar-bg); */
    background-image: url( ... ); /* <- url of your background image */
    background-size: cover; /* <- customize the image size */
    background-repeat: no-repeat; /* <- no repeat */
    background-position: top; /* <- postion */
    border-right: 1px solid var(--sidebar-border-color);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

Note that when you change the background image, also consider the color of the fonts; they might also need adjustments. Additionally, I didn't modify the background of the entire blog, but the setup methods are similar.

okk，我去试试

[cotes2020]

https://chirpy.cotes.page/posts/getting-started/#customizing-stylesheet