Changing background while loading the startpage

Hi,
You can add two rules, so remove the one above and add this instead:

@media only screen and (max-width: 767px) { 
    #top .av-siteloader-wrap {
    background-repeat: no-repeat;
    background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
}
}
@media only screen and (min-width: 768px) { 
    #top .av-siteloader-wrap {
        background-repeat: no-repeat;
        background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
        background-position: 50% 100%;
        background-attachment: scroll;
        background-size: cover;
    }
}

then change the first image for mobile and the second for desktop, which means to use different images.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Portrait and landscape mobile widths for a background image would be very different, so you will deed to use different images, to know the widths for your images test your device with this tool: screen resolution, you may need to reload for portrait and landscape.
Then model this css:

@media only screen and (max-width: 767px) and (orientation: portrait) { 
    #top .av-siteloader-wrap {
    background-repeat: no-repeat;
    background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
}
}
@media only screen and (max-width: 767px) and (orientation: landscape) { 
    #top .av-siteloader-wrap {
    background-repeat: no-repeat;
    background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
}
}
@media only screen and (min-width: 768px) { 
    #top .av-siteloader-wrap {
    background-repeat: no-repeat;
    background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
}
}

Note the first rule: (max-width: 767px) and (orientation: portrait) is for portrait mobile.
The second rule: (max-width: 767px) and (orientation: landscape) is for landscape mobile.
The last rule is the same as the last rule before and is for portrait and landscape tablet / desktop.

Best regards,
Mike

Hi,
Glad this helped, below you will find a link to a WebPageTest and your images could be smaller, try TinyJPG
I tested one of your images from the WebPageTest and TinyJPG made it 73% smaller

It looks like you only have about 12 images on your homepage so you could manually do this with FTP, download ▸ TinyJPG ▸ re-upload or you can use the TinyJPG plugin, it’s up to you, I believe you have to signup to use the plugin.
You would find a caching plugin like WP Fastest Cache will also help, other than that your site seems to load well.

Best regards,
Mike