Browse Source

Add background for wide screen monitors

master
Dejvino 11 months ago
parent
commit
14ba783f3e
3 changed files with 30 additions and 2 deletions
  1. BIN
      public/background.jpg
  2. +28
    -1
      src/app/globals.css
  3. +2
    -1
      src/app/layout.tsx

BIN
public/background.jpg View File

Before After
Width: 4160  |  Height: 3120  |  Size: 3.3 MiB

+ 28
- 1
src/app/globals.css View File

@@ -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 View File

@@ -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>


Loading…
Cancel
Save