Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hwarden162 opened this issue Apr 24, 2023 · 3 comments
Closed

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

hwarden162 opened this issue Apr 24, 2023 · 3 comments

Comments

@hwarden162
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants