make background image fixed

This commit is contained in:
luisa.bellitto 2025-06-14 16:29:01 +02:00 committed by Luisa Bellitto
parent 796eacb802
commit 871949b567
3 changed files with 21 additions and 12 deletions

View file

@ -8,7 +8,7 @@ function LoginAndSignUpPage() {
};
const [signup, setSignup] = useState(false);
return (
<div className="login-display">
<div className="background">
<div className="login-login">
<div className="login-part">
<div className={signup ? "signup-image" : "login-image"}></div>

View file

@ -1,4 +1,4 @@
.login-display{
.background{
display: flex;
flex-direction: column;
height: 100vh; /* Full viewport height */
@ -6,7 +6,7 @@
background: var(--gradient-blue-backround-mobile);
align-items: center;
justify-content: center;
background-attachment: fixed;
}
.login-text{

View file

@ -1,10 +1,19 @@
:root {
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown-light: #a28d7a;
--Rotkehlchen-brown-middle: #7F6D6D;
--Rotkehlchen-brown-dark: #4C4141;
--Rotkehlchen-yellow-default: #FED640;
--Rotkehlchen-yellow-hover: #EAC22A;
--Rotkehlchen-orange-default: #e79a0e;
--gradient-blue-backround-mobile: linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat;
}
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown-light: #a28d7a;
--Rotkehlchen-brown-middle: #7f6d6d;
--Rotkehlchen-brown-dark: #4c4141;
--Rotkehlchen-yellow-default: #fed640;
--Rotkehlchen-yellow-hover: #eac22a;
--Rotkehlchen-orange-default: #e79a0e;
--gradient-blue-backround-mobile: linear-gradient(
270deg,
rgba(20, 15, 86, 0.27) 0%,
rgba(20, 15, 86, 0.58) 24%,
rgba(20, 15, 86, 0.74) 43%,
rgba(17, 13, 71, 0.82) 56%,
rgba(13, 10, 56, 0.9) 68%
),
url("../../public/assets/images/BirdsSky.jpg") lightgray 50% / cover
no-repeat;
}