I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture loses its aspect ratio. How can I prevent this from happening while still keeping the image responsive?
<header>
<nav>
<ul>
<li id="back">
<a href="#" id="back"><img src="../images2/back.png" /></a>
</li>
<li id="name">
<h1>Person Name</h1>
</li>
</ul>
</nav>
<section id="iImage">
</section>
</header>
#iImage{
width: 100%;
height: 700px;
background-image: url(../images2/DerekDesktop.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
P.S. My next media query breakpoint is at 1280px, so the background won't change until then. I am aware that there are some inefficient CSS practices in this code, but this is just a training website and will not be made public.