YoungCoder YoungCoder - 19 days ago 10
CSS Question

Section background overflowing into another section

I apologize in advance for this somewhat lengthy explanation. I am trying to create a website such as http://melaniedaveid.com/ to improve my coding abilities. I created the first section page and it turned out great. But when I added another section, the previous section didn't fill up the whole page anymore (picture: http://imgur.com/a/EbUKn).

In order to solve this I gave full height to the first sections ID:

#header {
height: 100%;}


This fixed the problem(http://imgur.com/a/BlckC) but now when I resize my browser the second section over flows into my first, covering the text(http://imgur.com/a/C1jED). Any suggestions/leads would be greatly appreciated!



body {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/roses.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-size: 20px;
height: 100vh;
}

/*------------------------------------------------ HOME PAGE ------------------------------------------------------------------*/

/*------------------------------
HEADING TEXT
-------------------------------*/
.name h1 {
font-family: 'Muli', sans-serif;
font-size: 500%;
font-weight: 300;
text-align: center;
padding-top: 10%;
color: #ecf0f1;
font-family: 'Cormorant Garamond', serif;
}

.name p {
font-family: 'Play', sans-serif;
font-size: 130%;
text-align: center;
padding-top: 5%;
color: #ecf0f1;
font-family: 'Merriweather', serif;
font-weight: 300;
padding-right: 10%;
padding-left: 10%;
}

/*------------------------------
Nav Bar
-------------------------------*/

.navigation p {
display: inline;
font-family: 'Play', sans-serif;
color: #ecf0f1;
}

.navigation {
text-align: center;
padding-top: 15%;
}

.contents,
.contents:hover {
text-decoration: none;
color: #ecf0f1;
font-family: 'Delius Unicase', cursive;
}

/*------------------------------------------------ ABOUT PAGE ------------------------------------------------------------------*/

/*------------------------------
About Heading
-------------------------------*/

#about {
background-color: black;
background-size: cover;
height: 100%;

}

#header {
height: 100%;
}

<section id="header"> <!------------------------- HOME PAGE -------------------------->


<div class="container">
<div class="row">
<div class="col-xs-12 name">
<h1>Temple Naylor</h1>
</div>
</div>

<div class="row">
<div class="col-xs-12 name">
<p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world.</p>
</div>
</div>

<div class="row">
<div class="col-xs-12 navigation hidden-sm-down">
<p><a class="contents" href="#">ABOUT</a> / </p>
<p><a class="contents" href="#">WORK</a> / </p>
<p><a class="contents" href="#">CONTACT</a> / </p>
<p><a class="contents" href="#">PHOTOGRAPHY</a></p>

</div>
</div>
</div>

</section>


<section id="about"> <!------------------------- ABOUT PAGE -------------------------->


<div class="container">
<div class="row about">
<div class="col-md-6">
<p class="big-text"></p>
</div>
</div>

<div class="row">
<div class="col-md-6 about-text">
<p >Yup</p>
</div>
</div>
</div>
</section>




Answer

You can use css vh property for this.

#header {
    height: 100vh;
}

here is more info about css units. Hope this helps you.

Comments