Background image on the login page

AI-generated summary

The discussion is about adding a background image to the login page. PaulinaMX wants to know if it’s possible to put a background image in the purple area of the login page. cocococosti suggests checking an example from another discussion and playing with CSS and the image until it’s in the right position.

cocococosti later mentions that adding an image only to that specific area might not be possible, but suggests modifying the image with blank space to the left so the main part of the image is visible on the right. PaulinaMX finds this idea helpful and decides to try it.

Ultimately, PaulinaMX successfully adds a background image to the login page by using CSS code and modifying the image. They share the code used and thank cocococosti for the help.

.login-modal.in .modal-inner-container {
    background: url(https://i.imgur.com/mVKgXn0.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    padding-right: 350px;
}

I would like to know if is possible to put a background image in that purple area.

Check this example: Adding designs to pages - #7 by Blinq

You may need to play a little with the CSS and the image you use until you get it in the right position.

Thank you very much, I’m going to check.

@cocococosti Thanks, they seem like good options to me but I didn’t find something specific for the area I want to modify. :pensive:

I don’t think you can add an image only in that specific area.

I would use modified image with blank space to the left, so the main part of the image is visible in the right. Just like in Adding designs to pages - #8 by awesomerobot he used an image that has a character to the left, you’d do the oppposite to the right.

Mind you, I haven’t tested this :sweat_smile:

Good idea Chica, I’ll try that option :heart:

@cocococosti It’s working now :heart:

.login-modal.in .modal-inner-container {
    background: url(https://i.imgur.com/mVKgXn0.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    padding-right: 350px;
}

Thank you so much! :heart: