nwolf1151 nwolf1151 - 13 days ago 4
CSS Question

How to get rid of body background color between div background images

(started learning html very recently pls dont hurt me)
there are white slithers between the div background images http://i.imgur.com/ThGTESW.png

<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#entertainement">Entertainement</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</div>
</nav>
<div id="intro">
<h1 class="text-center">My website</h1>
<p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
<img id="profile-pic" src="#" alt="profile pic">
<p><br /><br />follow me on social media</p>
<div class="social-media">
<a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
<a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
<a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
<a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
<a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
</div><br /> <hr />
</div>
<div id="portfolio">
<h2>My portfolio of nothing:</h2>
<div class="albums">
<a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>


here is my css:

body {
color: white;
font-family: monospace;
font-size: 20px;
text-align: center;
}
h1 {
font-size: 100px;
margin-left: auto;
text-align: center;
}
.social-media img {
height: 100px;
width: 100px;
border-radius: 40px;
}
#profile-pic {
height: 250px;
width: 250px;
border-style: hidden;
border-radius: 25px;
}
.albums img {
height: 150px;
width: 150px;
}
#intro {
background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
}
#portfolio {
background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
hr {
opacity: 0.5;
}


any help?
....................................................................

Answer

Remove margin from h2 and remove <hr> to remove space

add h2 {margin : 0} in your css

body {
    color: white;
    font-family: monospace;
    font-size: 20px;
    text-align: center;
  }
  h1 {
    font-size: 100px;
    margin-left: auto;
    text-align: center;
  }
  .social-media img {
    height: 100px;
    width: 100px;
    border-radius: 40px;
  }
  #profile-pic {
    height: 250px;
    width: 250px;
    border-style: hidden;
    border-radius: 25px;
  }
  .albums img {
    height: 150px;
    width: 150px;
  }
#intro {
  background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
hr {
  opacity: 0.5;
}
h2 {
  margin: 0;
}
<div class="container-fluid">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#entertainement">Entertainement</a></li> 
      <li><a href="#contact">Contact Me</a></li> 
    </ul>
  </div>
</nav>
<div id="intro">
  <h1 class="text-center">My website</h1>
  <p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
  <img id="profile-pic" src="#" alt="profile pic">
  <p><br /><br />follow me on social media</p>
  <div class="social-media">
    <a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
    <a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
    <a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
    <a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
    <a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
  </div><br /> 
</div>
<div id="portfolio">
  <h2>My portfolio of nothing:</h2>
  <div class="albums">
    <a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>

Comments