Thomas Ogbourne Thomas Ogbourne - 1 month ago 20
CSS Question

Background showing between divs

There is background colour showing between image divs. I thought it might be something to do with margins but Ive googled for days and cant seem to find something that works for me. Even setting the div to position: absolute and the parent to relative doesnt work. The picture still wont show without it being relative.(robot2.jpg in div sec, sectThree) Any help would be great cheers. :)

website is here: thomasogbourne.me
sorry if a bit vague ive not posted on here before



html, body {
margin: 0px;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #000000;


}


h1, h2, h3, h4, h5, h6, p {
margin-bottom: 20px;
}

/*
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,.5);
z-index: 99;
text-align: center;

}

nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;

}*/



.sect {
position: rela;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.subSection {
height: 30%;

}




.smallsubSection {
height: 20%;


}

.sectOne {
background-image: url("/Images/CX750Msmall.jpg");
background-attachment: fixed;

}

.sectTwo {
background-image: url("/Images/drone.jpg");
position: relative;
top: -90px;
z-index:-1
}

.sectThree {
background-image: url("/Images/robot2.jpg");
position: absolute;
top: -150px;
background-repeat: space;
}


#aboutSection {
background: #648880;
background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);

}

#gearSection {
background: #0083FF;
background: linear-gradient(#3943DA, #00F3FF);
height: 66%;
}

#contactSection {
background: #648880;
background: linear-gradient(#DEDEDE, #898989 85%);
}

.smallsubSection {
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;


}

#bigname {
font-family: "Luckiest Guy";
font-size: 45px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
letter-spacing: 2px;
text-decoration: overline underline;
color: #D5D5D5;
text-align: center;
position: absolute;
top: 33%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);


}
/* MENU START */
nav.container {
margin: 0 auto;
padding: 30px 3em;
background-color: #000040;
position: fixed;
width: 40%;
text-align: center;
list-style:none;
margin-left: 27.5%;
z-index: 1;
}

nav.container a {
color: #fff;
text-decoration: none;
margin: 0 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
font-size: 25px;
padding:10px;
}

nav.borderXwidth a:before, nav.borderXwidth a:after
{
position: absolute;
opacity: 0;
width: 0%;
height: 2px;
content: '';
background: #FFF;
transition: all 0.3s;
}

nav.borderXwidth a:before
{
left: 0px;
top: 0px;
}

nav.borderXwidth a:after
{
right: 0px;
bottom: 0px;
}

nav.borderXwidth a:hover:before, nav.borderXwidth a:hover:after
{
opacity: 1;
width: 100%;
}
/* MENU END */




.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 13px 21px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
position:relative;
bottom: -90px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 150px;


}

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


/* SCROLLING TEXT MAIN SECTION */

.content {
position: absolute;
top: 144%;
left: 54%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 35px;
line-height: 40px;
font-family: 'Lato', sans-serif;
color: #ecf0f1;
height: 160px;
overflow: hidden;
zoom: 3.5;
-moz-transform: scale(3.5);
}

.visible {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.visible:before {
content: '';
left: 0;
line-height: 40px;
}
.visible:after {
content: '';
position: absolute;
right: -80px;
line-height: 40px;
}
.visible:after, .visible:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: opacity;
animation-name: opacity;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

p {
display: inline;
float: left;
margin: 0;
left: 40px;
}

ul {
margin-top: 0;
padding-left: 230px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: change;
animation-name: change;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;

}

ul li {
line-height: 40px;
margin: 0;
}
li {
width: 270px
}

@-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-webkit-keyframes change {
0%, 12%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
@keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes change {
0%, 12%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}

<body>

<nav class="container borderXwidth">

<a id="home" href="#homeSection">HOME</a>
<a id="about" href="#aboutSection">ABOUT</a>
<a id="gear" href="#gearSection">MY GEAR</a>
<a id="portfolio" href="#portfolioSection">PORTFOLIO</a>
<a id="contact" href="#contactSection">CONTACT</a>

</nav>

<div id="homeSection" class="sect
sectOne">



<div id="bigname">
<h1>
THOMAS OGBOURNE
</h1>
<a href="#aboutSection"> <button class="button button2 hvr-icon-hang hvr-fade">Begin</button></a>
</div>
</div>`




<div id="aboutSection" class="subSection">
<div class='content'>
<div class='visible'>
<p>
Hello I'm Tom:
</p>
<ul>
<li>Web Developer</li>
<li>Gamer</li>
<li>Student</li>
<li>Computer Guy</li>
</ul>
</div>
</div>
</div>




<div id="serviceSection" class="sect
sectTwo"></div>
<div id="gearSection" class="subSection2"></div>
<div id="portfolioSection" class="sect
sectThree"></div>
<div id="contactSection" class="smallsubSection">
<h2 style="margin-top:0;">
Email: *******************
</h2>
<h2>
Phone: **************
</h2>
</div>



<script src="js/jquery-3.1.1.min.js"></script>

<script src="js/app.js"></script>
</body>




Answer

Is this what you wanted? :

https://jsfiddle.net/n3h3cm1x/

Basically your code is very messy and chaotic. there is something like this in there:

<a href="#aboutSection"> <button class="button button2 hvr-icon-hang hvr-fade">Begin</button></a>
            </div>
        </div>`




        <div id="aboutSection" class="subSection">
            <div class='content'>

Notice that ` symbol? that was the cause of the first break between divs.

the second break between divs is

top:-90px;

which you added to few sections at the bottom.