When accessing the website on a mobile device, the background image adjusts based on the amount of content on the page. It expands when there is more content and shrinks when there is less. For instance, opening the navigation panel on a mobile device causes the background to dramatically increase as more content is revealed. How can we make the background size independent of the content and solely dependent on the viewing area?
Current CSS and HTML implementation:
<body class="bg-image1">
body {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.bg-image1 {
background-image: url(path);
}