image issues :( please help

Question

I am struggling with my images :( for some reason my background image does not fill my page when I shrink my browser window. I have tried making it a fixed image with the content scrolling over OR having it unfixed hoping it will stretch to the bottom of the content but neither option will work for me.... I am also unable to figure out how to have the image of me move to the center of the screen in my media queries...

I would love to know where this white background at the bottom is coming from ... its driving me crazy...

please help!!! THANK YOU!!

this is my website https://kaylapasciullo.com/about.html

this is my HTML

<!DOCTYPE html>
<html>

<head>
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="aboutstyles.css">
    <title>Kayla Pasciullo - Web Developer</title>
        <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
</head>

<body>
  <div class="wrapper">
    <div class="topnav">
     <a href="index.html">home</a>
     <a href="about.html">about</a>
         <div class="right-nav">
         <a href="#projects">projects</a>
         <a href="contact.html">contact</a>
        </div>
    </div>
  <header><h1>looking for a web developer?</h1></header>
    <img src="kayla.jpeg">
    <div class="main-content">
   <p>I am a front end web developer living in the beautiful okanagan valley of B.C. Canada. My current focus is designing and coding functional, responsive landing pages for small or local businesses using HTML and CSS. I take pride in writing well designed, efficent code to build websites from concept all the way to completion. </p>
   <p>I am skilled in web programming, with an in depth knowledge of HTML and CSS. I am an agressive problem solver who loves a challenge. I am always looking to learn or try something new! When I am not busy coding I am usually hanging out with my friends or family at a lake, beach or if I am lucky at camp &hearts; </p>
<p>if your a business looking for a website, or an employer looking to hire <a href="mailto:kayla.pasciullo@hotmail.com">&#9993; email me &#9993;</a></p>
   </div>
</div>
</body>
'''

this is my CSS

 ```css
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*html, body, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, hgroup, 
menu, output, ruby, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/*END OF RESET*/

*{
  font-family: sans-serif;
  color: black;
  text-align: center;
  font-size: 18px;
  margin: 0;
  padding: 0;
  border: 0;

}
body html{
  height: 100%;
}

a:link{
  text-decoration: none;
}
a:visited{
   text-decoration: none;
}
a:hover{
   text-decoration: none;
   color: navy;
}
a:active{
   text-decoration: none;
}
body::before{
  background-image: url(domenico-loia-hGV2TfOh0ns-unsplash.jpg);
  margin: 0px;
  padding: 0px;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left:  0;
  bottom: 0;
 background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.75;
  background-color: lightgrey;
}

.wrapper{
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center; 
    background-size: cover;
    position:relative;
    width:100%;
    height:100%;
    overflow: initial;
    font-family: 'Scout', arial, sans-serif;
}
section{
  position: relative;
  padding: 50px;
}
p {
  position: relative;
  padding: 15px;
  margin: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}
h1 {
  position: relative;
  font-size: 50px;
  text-align: center;
}
h2 {
  padding: 100px;
  margin: 100px;
  position: relative;
  font-size: 18px;
}
.main-content{
  overflow: hidden;
}
.email:hover{
  position: relative;
  color: navy;
}


/*Add a black background color to the top navigation*/

.topnav {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  position: relative;
  font-weight: bold;
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
  position: relative;
  background-color: transparent;
  color: navy;
}

/*float 1/2 of the nav to the right*/
.right-nav {
  position: relative;
  float: right;
}
@media (max-width: 345px) {

.right-nav{
  position: relative;
  display: inline;
  float: left;
}
.main-content{
 float: left;
  }
}
@media (max-width: 750px) {
.main-content{
 float: left;
  }
 .right-nav{
  position: relative;
  display: inline;
  float: left;
}
}
img{
  width: 200px;
  height: 250px;
  border: solid lightgrey 2px;
  border-radius: 50%;
  display: block;
  float: left;
  margin-left: 25px;
  margin-right: 10px;
  }'''

Welcome to the Treehouse Community

Looking to learn something new?

Kayla Pasciullo

Kayla Pasciullo

image issues :( please help