Can I set the background image to not downpixelate/blur?

[hwarden162]

Question

When I add a background image in the config.yaml it seems that it is either blurred or downpixelated. Is there a way in the config.yaml or somewhere else to set it to use the fully pixelated/non-blurred image? I didn't see any mention of this in the documentation.

[mmzeynalli]

By default, it resizes every image there is (post images, bg, profile photo etc.). You can try to match that size by yourself, editing it before applying to website, or try svg format, as it cannot be resized.

[eishundo]

You can create your own CSS override file to achieve this.

With v4.0.0:
assets/styles/override.scss

/* Used to display background image */
.home .background {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-attachment: fixed;
    background-position: center;
    transform: scale(1.0);
    filter: blur(0px);
    /*
    transform: scale(1.1);
    filter: blur(3px);
    */
    background-size: cover;
}

Prior to v4.0.0:
static/css/style.css

/* Used to display background image */
.background {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-attachment: fixed;
    background-position: center;
    transform: scale(1.0);
    filter: blur(0px);
    /*
    transform: scale(1.1);
    filter: blur(3px);
    */
    background-size: cover;
}

The original transform and filter values are commented for reference. No need to include the commented code in your files.

[hossainemruz]

Added a guide demonstrating how to override default CSS here:
https://toha-guides.netlify.app/posts/customizing/customize-css/