Looking for direction on my Portfolio page

I need to ask question. I am sure it is easy once I figured it out or someone on here points me in the right direction.

What I am trying to do is keep the header fixed and the parallax image at a default state is as it appears when you first view the page. But here is the kicker....I need the parallax image to move behind the header as you scroll down the page and then the default of the page needs to be with the image showing.

I hope I have not confused anyone if you need to ask me a question please feel free. I am patiently waiting.

Here is my code below. You can view it in your browser at here

Here is my style sheet.

(For purposes of viewing for this question I am asking this forum)

You can view it in your browser Here

Source Code:

<!DOCTYPE HTML>

<html lang="en">
<head>
<title>Diana Magers | Shaping the Internet Globally</title>

<link href="style.css" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta charset="utf-8">
<meta name="author" content="Diana Magers">
<meta name="description" content="Welcome to the portfolio of Diana Magers. I am a Web designer and developer from Raleigh, North Carolina.">
<meta name="keywords" content="Web Design, Web Development, Logo Design, graphic design, Barbados, creative, Raleigh graphic designer, Raleigh Web Designer, Raleigh Web Developer, Raleigh's best, Diana Magers, Diana Lynn Magers">

<script  type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/scriptotoggle.js"></script>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style type="text/css">
.fadeIn .topsection .introcont .fadecontactme p a {
 color: #A2D366;
}
.fadeIn .topsection .introcont p .introtext .texthighlight {
 color: #7A9021;
}
.fadeIn .topsection .introcont .fadecontactme p a {
 color: #4C7E25;
}
</style>


<!--[if lt IE 9]>
 <script src="js/css3-mediaqueries.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->




</head>


<body class="fadeIn">

 <div class="topsection">
  <div class="headerwrap" id="header">
   <div class="header">
    <a href="index.html"><img src="images/logo.png" class="logo"/></a>
    <div class="nav">
     <ul>
      <li><a href="/index.html/"><span class="activenavlink">Home</span></a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
     </ul>
    </div>
   </div>
  </div>


 </div>

 <div class="bgsection"></div>
 <div class="midsectionwrap">
   <div class="parallaxwrapper"></div>
   <div class="midsection" id="midsection">
     <p><span class="heading">WHAT I DO?</span></p>
     <div class="boxrowone norm"> <img src="images/whatido/communicate.png"/>
       <p><span class="skillheading">COMMUNICATE</span></p>
        </div>
     <div class="boxrowtwo norm"> <img src="images/whatido/design.png"/>
       <p><span class="skillheading">DESIGN</span></p>
        </div>
     <div class="boxrowtwoand norm"> <img src="images/whatido/and.png"/> </div>
     <div class="boxrowtwo norm"> <img src="images/whatido/code.png"/>
       <p><span class="skillheading">CODE</span></p>
        </div>
     <div class="skilltext clearfix">
       <p class="clearfix">I absolutely love what I do. I always <span class="highlightedtext" style="color:#80c029">communicate</span> with my client before      I begin to work on a design. It is where I get my inspiration for before I get started on my particular <span class="highlightedtext" style="color:#80c029">design</span>. When I am not in photoshop creating something awesome, you can find me on my laptop <span class="highlightedtext" style="color:#80c029">coding</span> clean and unique websites using the latest HTML5 and CSS3 standards in the industry. </p>
        </div>
      </div>
</div>
 <div class="footer">
<p><ul>
    <li class="scoialbtns twitterbtn"><a href="https://twitter.com/diana.magers">twitter</a></li>
    <li class="scoialbtns facebookbtn"><a href="http://www.facebook.com/dlmagers">facebook</a></li>
    <li class="scoialbtns instabtn"><a href="http://instagram.com/dlmagers" target=_blank>instagram</a></li>
    <li class="scoialbtns mailbtn"><a href="#">mail</a></li>
   </ul></p>

  website passionately designed and developed on a laptop windows system by Diana Magers.<br>
  made in North Carolina<br>
  Diana Magers | Copyright 2013<br>
 </div>



<!--scripts-->
<script type="text/javascript" src="js/smoothscroll.js"></script> 
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>

<script type="text/javascript">
$.stellar()
</script>

<script>
  (function(d, t) {
    var e = d.createElement(t);
    e.src = d.location.protocol + '//www.browserawarenessday.com/widget/50f31281c49b658d2100000b';
    e.async = true;
    var n = d.getElementsByTagName(t)[0]; n.parentNode.insertBefore(e, n);
  })(document, 'script');  
</script>
<!--end of scripts-->

</body>
</html>

3

Contributors

2

Replies

2 Days

Discussion Span

3 Months Ago

Last Updated

3

Views

dlmagers

Newbie Poster

23 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Months Ago

0

@dlmagers

I need the parallax image to move behind the header as you scroll down the page and then the default of the page needs to be with the image showing.

I don't understand what you trying to do? You want the image to being forward and the page to be in the background? Kinda like inside out?

LastMitch

Industrious Poster

4,132 posts since Mar 2012

Reputation Points: 132

Solved Threads: 334

Skill Endorsements: 45

3 Months Ago

0

Yea even i didnt understand your problem or question, when i say title of post u was asking about your portfolio i thought...lol please be specific

domainflipper

Newbie Poster

2 posts since Feb 2013

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

Looking for direction on my Portfolio page

This article has been dead for over three months: Start a new discussion instead