I'm having trouble with my websites background

83
December 29, 2018, at 5:30 PM

The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.

I don't know if the problem is in the css or the html file.

body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"> 
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Answer 1

Because you set background-image for two element (html and body). A simple webpage layout like this:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.

body{
  margin: 0;
  padding: 0;
  background-image: url("img/Mountain.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
Answer 2

add this media code

@media screen and (max-width:500px){
  body, html {
    background-size:100% 100%;
  }
}
Answer 3

You don't need to set bckgound for html and body. Only set the background for body.

body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
READ ALSO
How to import a specific version of fabric in android

How to import a specific version of fabric in android

I am building an android app using Bazel build, and I am not able to send crash logs to fabricio after the Bazel build

103
I/O error on POST request while sending query parameters

I/O error on POST request while sending query parameters

I am using the below code for hitting a POST request with two query parametersMy POSTMAN URL looks like this : https://example

74
Carbon converts 12:00 to wrong time

Carbon converts 12:00 to wrong time

It seems Carbon converts 12:00 (24:00) vice versa when the format is "H a":

54
CSRF (Cross-site request forgery) attack example and prevention in PHP

CSRF (Cross-site request forgery) attack example and prevention in PHP

I have an website where people can place a vote like this:

74