浏览代码

Add background for wide screen monitors

master
Dejvino 1年前
父节点
当前提交
14ba783f3e
共有 3 个文件被更改,包括 30 次插入2 次删除
  1. 二进制
      public/background.jpg
  2. +28
    -1
      src/app/globals.css
  3. +2
    -1
      src/app/layout.tsx

二进制
public/background.jpg 查看文件

之前 之后
宽度: 4160  |  高度: 3120  |  大小: 3.3 MiB

+ 28
- 1
src/app/globals.css 查看文件

@@ -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 查看文件

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


正在加载...
取消
保存