Implement background image

This commit is contained in:
swaggboi 2022-02-12 17:10:51 -05:00
parent 05b5b9d28e
commit c5888f8236
7 changed files with 21 additions and 7 deletions

View File

@ -2,4 +2,5 @@
source 'https://rubygems.org'
gem 'puma'
gem 'sinatra'

View File

@ -3,6 +3,9 @@ GEM
specs:
mustermann (1.1.1)
ruby2_keywords (~> 0.0.1)
nio4r (2.5.8)
puma (5.6.2)
nio4r (~> 2.0)
rack (2.2.3)
rack-protection (2.1.0)
rack
@ -16,8 +19,10 @@ GEM
PLATFORMS
arm64-darwin-21
x86_64-linux
DEPENDENCIES
puma
sinatra
BUNDLED WITH

12
public/css/main.css Normal file
View File

@ -0,0 +1,12 @@
html, body {
margin: 0px;
height: 100%;
}
#willpower {
background-image: url('/images/willpower.gif');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}

BIN
public/images/willpower.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

View File

@ -1,6 +1 @@
<h1>Ayy...</h1>
<p>lmao</p>
<video width="640" height="480" controls>
<source src="video/willpower.mp4" type="video/mp4">
Some error message here
</video>
<div id="willpower"></div>

View File

@ -11,6 +11,7 @@
<meta name="twitter:description" content="One man's journey.">
<title>My Willpower</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<%= yield %>