From f29d6e6b62b0607897712ea37749834a57503997 Mon Sep 17 00:00:00 2001 From: Meira Tompkins Date: Wed, 22 Apr 2020 12:44:46 -0400 Subject: [PATCH] full screen background img changes --- final_project/css/style.css | 34 ++++++++++++++++++++-------------- final_project/index.html | 8 +++++--- final_project/js/this.js | 18 +++++++++--------- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/final_project/css/style.css b/final_project/css/style.css index 46e4f14..21094e6 100644 --- a/final_project/css/style.css +++ b/final_project/css/style.css @@ -2,16 +2,13 @@ body { margin: 0; padding: 0; overflow: hidden; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + min-height: 100vh; } - img{ - - } - #img{ - max-width: 100vw; - max-height: 100vh; - } /* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); @@ -20,19 +17,28 @@ body { font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 56px; - position: absolute; - top: 50%; - left: 34%; - + } p{ - position: absolute; - top: 40%; - left: 34%; + font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 20px; } + +.wrapper{ + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + min-height: 100vh; + +} diff --git a/final_project/index.html b/final_project/index.html index 011e0ce..18349e3 100644 --- a/final_project/index.html +++ b/final_project/index.html @@ -7,10 +7,12 @@ -
-

+
+
+

Good Person

-
+
+
diff --git a/final_project/js/this.js b/final_project/js/this.js index 69acafe..1f4b1c9 100644 --- a/final_project/js/this.js +++ b/final_project/js/this.js @@ -2,12 +2,12 @@ const numItemsToGenerate = 1; function renderItem(){ fetch(`https://source.unsplash.com/1600x900/?morning`).then((response)=> { - let item = document.getElementById("img"); - item.classList.add('item'); - item.innerHTML = ` - morning image - ` - document.documentElement.appendChild(item); + document.body.style.backgroundImage = `url(${response.url})` + // item.classList.add('item'); + //item.innerHTML = ` + // morning image + // ` + // document.documentElement.appendChild(item); }) } for(let i=0;i