Fitting CSS background image to IOS - html

Question

I could really use some help.
I have a 2000x1000 image png file I am using as my background for a website. It works great on a desktop. When viewing on my iphone, only the left 1/3 of the image is shown and it stacks two ontop of eachother. I have tried using background-size: auto and 100%, as well as background-attachment:scroll to no avail. I've created a proper aspect ratio image from the larger image and used media queries, but it still ends up super weird. You can find my current media in here which is supposed to detect if the resolution is < 415px to change the size to max, however this doesn't work. Ideally I would like the background to just center in the middle, maintain its aspect ratio and take up the full window height. Here is my CSS. Thanks.
*
{
margin: 0;
padding: 0;
}
.email
{
color:black;
font-size: 25px;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
body
{
background: black;
background-image: url("images/Mountains.png");
}
.html
{
width: 100%;
height: 100%;
}
.github
{
position: fixed;
top: 37%;
left: 41%;
transform: translate(-50%, -50%);
}
#items
{
transition: margin-left .5s;
padding: 20px;
}
.link_in
{
position: fixed;
top: 37%;
left: 59%;
transform: translate(-50%, -50%);
}
.loc
{
color:black;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
#media screen and (max-height: 450px)
{
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#media screen and (max-width: 415px)
{
body
{
background-color: black;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
}
#media screen and (max-width: 1100px)
{
.github {
position: fixed;
top: 37%;
left: 31%;
transform: translate(-50%, -50%);
}
.link_in
{
position: fixed;
top: 37%;
left: 69%;
transform: translate(-50%, -50%);
}
}
.sidenav
{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a
{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover
{
color: #f1f1f1;
}
.sidenav .close
{
font-size: 36px;
position: absolute;
top: 0;
right: 25px;
margin-left: 50px;
}
.thanks
{
color:black;
position: fixed;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
.under_construction
{
position: fixed;
top: 37%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 1

I think you're trying to keep the background image fixed and responsive. You can keep the size to cover, so it will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Then you can set the position to center, so if it stretches it will display the center part of the image. And keep the attachment to fixed, so when you scroll the background image is fixed.
background-size: cover;
background-position:center ;
background-attachment: fixed;