fred.boniface/fredboniface.co.uk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add sticky header image

Browse Source
This commit is contained in:
Fred Boniface 2022-10-19 14:11:11 +01:00
parent 58d51ba29c
commit 145d3499c3
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
style/new_style.css
View File

@ -3,31 +3,36 @@ html {
} }
body { body {
height: 100%;
width: 100%;
margin: auto;
} }
.header-image-home { .header-image-home {
background-color: rgb(29,49,49); background-color: rgb(29,49,49);
background-image: url("https://via.placeholder.com/375x335.webp"); background-image: url("https://via.placeholder.com/1200x400.webp");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
min-height: 40%; height: 275px;
max-height: 45%; min-width: 100%;
width: 100%; max-width: 100%;
position: fixed; /* Try setting this to relative and .page-title to absolute */ margin: auto;
top: 40px; position: sticky;
left: 0; top: -190px;
} }
.page-title { /* This needs to be bottom center of header-image-home/header-image */ .page-title { /* This needs to be bottom center of header-image-home/header-image */
font-family: sans-serif; font-family: sans-serif;
font-size: 4vw; font-size: 4vw;
text-align: center; text-align: center;
position: absloute; position: absolute;
bottom: -10px;
box-shadow: 3px; box-shadow: 3px;
color: azure; color: azure;
} }
.content { .content {
margin-top: 95%; margin: auto;
margin-top: 10px;
width: 90%;
} }