Эффект прокрутки параллакса работает, но мое изображение не будет прикреплено к обеим сторонам и к верхней части страницы - PullRequest
Новая
       35

Эффект прокрутки параллакса работает, но мое изображение не будет прикреплено к обеим сторонам и к верхней части страницы

1 голос
/ 19 октября 2019

Я начал работать с HTML и CSS, я пытаюсь сделать проект с параллакс-прокруткой. Я взял здесь существующий код для эффекта параллакса здесь.

Эффект параллакса работает, но изображение имеет барьер между ним и концом страницы.

image 1 image 2

Мой HTML и CSS: 

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html {
background-color: rgb(228, 210, 210);
}

.parallax {
  /* The image used */
  background-image: url("background.jpg");
  min-height: 850px; 


  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  width:100%;
  text-align: center;
  padding-top: 95px;
  color: rgb(255, 255, 255);
  font-size: 2em;
}

#title {
  text-align: center;
}

.div1 {
  height:500px; 
  background-color:rgb(21, 106, 112); 
  color: rgb(175, 174, 174);
  font-size:32px;
  border-radius: 25px; 
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

.div2 {
  height:500px; 
  background-color:rgb(60, 219, 153); 
  color: rgb(92, 91, 91);
  font-size:32px;
  border-radius: 25px; 
  padding: 15px 5px;
  margin-top: 15px;
  border: 3px solid rgb(0, 0, 0);
  font-family: 'Montserrat', sans-serif;
}

ul, ul > h1 > li, #skills {
  color: rgb(102, 101, 101);
  list-style-type: square;
}

#sideprojects {
  text-align: center;
}

#nav-base {
  height: 50px;
  width: 100%;
  background-color: rgb(29, 28, 28);
}
<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css\style.css" rel="stylesheet" />
  </head>
      <body>
      
      <div class="parallax">
          <h1>name</h1>
      </div>

      <div id="nav-base">

      </div>
      
      <div class="div1">
          <h1 id="title">Random Title</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur volutpat fringilla. Morbi eget hendrerit augue. 
          Vestibulum ipsum risus, convallis sed sagittis vitae, tincidunt eget sem. Sed feugiat luctus diam non sollicitudin. 
          Nulla eu lectus bibendum, tempus est porttitor, vulputate metus. Vestibulum nec diam pellentesque, aliquam eros eget, semper magna. Suspendisse aliquam, dui nec accumsan dapibus, mi neque sollicitudin eros, ac fringilla dolor nisi vitae elit. 
          Quisque et vehicula purus. Nulla vestibulum sem nibh, vitae consectetur tortor convallis posuere. Vestibulum nulla libero, tincidunt sit amet suscipit non, rhoncus ut ligula. 
          Morbi tortor mauris, bibendum sit amet lorem vitae, convallis dignissim nisi. In pharetra et odio eu tristique. Nam ullamcorper pharetra nibh, at tincidunt diam.
      </div>

      <div class="div2">
          <h2 id="sideprojects">Side Projects</h2>
          <ul id="skills">
              <h2>Skills</h2>
              <li>Java</li>
              <li>HTML</li>
              <li>CSS</li>
              <li>Wordpress</li>
          </ul>
      </div>
      
      </body>  
</html>

1 Ответ

0 голосов
/ 19 октября 2019

Это из-за поля по умолчанию, которое задается тегом body браузером (для chrome - 8px (оно может варьироваться от браузера к браузеру). Это может быть переопределено в вашем CSS, если вы хотите что-то вроде этого: 

HTML, body {
margin: 0px;
}
...