CODEWITHSUNDEEP
htmlcss
M. Guerrero
M. Guerrero

Reputation: 95

I'm having trouble with my websites background

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>

Upvotes: 1

Views: 68

Answers (3)

Mordecai
Mordecai

Reputation: 1494

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;
}

Upvotes: 1

Situdio
Situdio

Reputation: 19

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;
}

Upvotes: 0

doğukan
doğukan

Reputation: 27559

add this media code

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

Upvotes: 0

Related Questions