background image in modernapp login

GaryLog2 years ago

hello. Can anyone please tell me how to change the background of the PAPER area on the login page to an image? I can place a colored background with the background key so I think I'm in the correct area, but there's nothing about the image

Anton Tananaev2 years ago

You can just set an image as a background through the style. No different from a standard CSS.

GaryLog2 years ago

thanks for the prompt response Anton,

Could you give me a reference, some lines or the key to find out more, I couldn't find anything on how to do it, maybe I'm looking wrong

Anton Tananaev2 years ago

Should be the same place where you changed the background color.

GaryLog2 years ago

Yes, I'm clear about the work area, I mean the code to put, since I can't find anything about that area on the web. If you could give me an example or tell me the name of the "command" so to speak, so I can search more on the web,

Anton Tananaev2 years ago
GaryLog2 years ago

Thank you very much, I'll start reading immediately

GaryLog2 years ago

im triying this and no result any ideas?

background: no-repeat url("../src/resources/images/car.jpg"), 
gets sintax error

background: url("../src/resources/images/car.jpg"), 
gets ---- url('undefined')  

background: '../src/resources/images/car.jpg',
no error but no image

background: "url("../src/resources/images/car.jpg")",
no error but no image
Cristian2 years ago

in LoginLayout.js

import Image from '../resources/images/car.jpg';

and

 paper: {
backgroundImage: `url(${Image})`,

you just need to style the image (size, responsive, etc.)

I hope this is helpful

GaryLog2 years ago

Christian, I can say this since we are not in the Cattar World Cup headquarters......I LOVE YOU BROTHER!! the image came out deformed, and repeated, and horrible, but it is already visible and from there I can play with it, thank you very much

MEGATRACKGPS SAS2 years ago

greetings cristian to improve the logo design that fits the screen you must use

background-size: cover

I do have it

GaryLog2 years ago

YeiserGS7, happy day, great design of your login page, a question, how did you make it load faster than normal? Or if you did not make modifications, what are the specifications of your vps? thank you very much

MEGATRACKGPS SAS2 years ago

Thank you friend, happy day, the truth is, I have not made any important modifications. the modifications are made in the same .js I do not recommend using the .css
my vps
https://ibb.co/TYxtzCZ

Cristian2 years ago

Suggestion, enlarge the sidebar width to 60% in dimensions.js
sidebarWidth: '60%',
change the sidebar{..} logo to paper{..} in LoginLayout.js

and in LoginLayout.js change this to paper
padding: theme.spacing(0, 0, 0, 0, 0),

and you will see a significant design change if you want to use a background image in the login.

Cristian2 years ago

obviously the image next to the sidebar has to be changed