Parallax Spacing Issues

Question

I'm learning how to build a parallax site and i'm running into spacing issues between the background image and the content. I changed the display to inline-block and gave it a width of 100%. Is this the proper way to achieve what I want?

body, html{
  height: 100%;
}

.parallax{
  background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/v1480649066/hero4_u3xhhu.jpg");
  height: 100%;
  
  /*Parallax Scrolling Effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:
}

.content-1{
  height: 500px;
  background-color: blue;
  font-size: 20px;
  display: inline-block;
  width:100%;
}

.content-2{
  height: 500px;
  background-color: red;
  font-size: 20px;
  display: inline-block;
  width: 100%;
}

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Parallax Test</title>
  </head>
  <body>
    <div class="parallax"></div>
    
    <div class="content-1">
      <h2>This is background #1</h2>
      <p>About content could go here</p>
    </div>
    
    <div class="parallax"></div>
    
    <div class="content-2">
      <h2>This is background #2</h2>
      <p>Portfolio content could go here</p>
    </div>
    
    <div class="parallax"></div>
  </body>
  </html>

Hi. What is the problem exactly and what do you expect to achieve. — Web Dev Guy, Feb 03 '17 at 23:38
Sorry, I didn't word my question very well. I'm trying to build a parallax site for the first time. While building it, I ran into an issue. There was white space between my background image and my content div. So, I added display inline-block to the content div. I manged to get it to work the way I wanted. But is there a better way to do it? — James G, Feb 03 '17 at 23:45

Parallax Spacing Issues

0 Answers0