Custom login screen's background image not covering

I am facing an issue on the custom login screen. I set the Background size to cover, but it is not covering the page.
During the chat we've checked the Custom CSS and noticed that commenting/removing a line seems to fix the issue. This is how it should be:

html body {
display: flex;
align-items: stretch;
align-content: flex-start;
background-position: 100% 100%;
/* background-size: 60%; */
}

So the "background-size: 60%;" property needs to be disabled.

  • Adam Czajczyk
    • Support Gorilla

    Hi JazzyDan

    I just had quite a long conversation with one of the Branda developers about this. We've tested and considered various scenarios and I've got some additional information for you: while this particular issue with this specific image can be solved by removing the line mentioned before, making that a permanent change will at the same time affect other cases - some of them (including the unmodified template used in this case) quite badly.

    The main "reason" for the issue here is the image size and width/height ratio which is completely different to the one used in the template. It turns out to be quite impossible to create CSS that universal that would server all possible cases so while there's going to be solution, it's gonna be a bit different.

    It's a common practice - due to that exact reason - to actually "force" specific size/ratio images. Take a look how it works when you're for example changing a header image in some WP themes or when you're trying to add "cover" image to your Facebook page. There's a suggestion to use landscape (or in some other uses portrait or square) oriented image and a tool to cut out/resize the image. That's a solution that would solve similar issues in a way that's commonly done and that's actually a really universal solution so that's what we already got on a features list for future releases. I'm not able to give an ETA for this but it's already on a list and should prevent similar issues in future.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.