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:


<html lang="en">
<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;

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

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


<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">
      <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>


 <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 class="boxrowtwo norm"> <img src="images/whatido/design.png"/>
       <p><span class="skillheading">DESIGN</span></p>
     <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 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 class="footer">
    <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>

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

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

<script type="text/javascript">

  (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');  
<!--end of scripts-->


Recommended Answers

All 4 Replies

Member Avatar


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?

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

Dammn I was trying to figure out what you meant by "the image behind the header as you scroll" can you provide us with a better explanation on how you would like to change it to.

Member Avatar

This thread is a year old kevin, I doubt very much whether the OP is still having this issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.