Bläddra i källkod

Add background for wide screen monitors

master
Dejvino 1 år sedan
förälder
incheckning
14ba783f3e
3 ändrade filer med 30 tillägg och 2 borttagningar
  1. Binär
      public/background.jpg
  2. +28
    -1
      src/app/globals.css
  3. +2
    -1
      src/app/layout.tsx

Binär
public/background.jpg Visa fil

Före Efter
Bredd: 4160  |  Höjd: 3120  |  Storlek: 3.3 MiB

+ 28
- 1
src/app/globals.css Visa fil

@@ -1,12 +1,39 @@

body {
#cv body {
background-color: lightgrey;
}

.background {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
z-index: -10;
}
@media screen and (min-width: 1400px) {
.background {
background: url("/background.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -10;
}

.main-container {
margin-top: 10rem;
margin-bottom: 15rem;
border: 1px solid lightgray;
border-radius: 5px;
}
}

.main-container {
background-color: white;
padding-top: 1rem;
padding-bottom: 0.2rem;
z-index: 1;
transition: 0.5s;
}

.main-container .photo {


+ 2
- 1
src/app/layout.tsx Visa fil

@@ -21,8 +21,9 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<html lang="en" id="cv">
<body className={inter.className}>
<div className='background'></div>
<PersonProvider>
{children}
</PersonProvider>


Laddar…
Avbryt
Spara