Step 1. Open the html/css editor

Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 2. add your image

Upload the photo you intend to use for your parallax header. Click on "ASSESTS" then "Upload Files..". You want an image dimension no less than 1500x650.

---

Step 3. Inactivate html coding

Choose from the left the page layout you intend to use the parallax header on. You can also create a new page layout if you don't want to lose a default page layout.

Now scroll down until you find "<div class="banner-wrap">", or your banner's coding [each Weebly theme is a little different]. You're going to inactivate this coding by using "<!--" and "-->" as shown in orange below.

<!--<div class="banner-wrap wsite-background">
<div class="container" >
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
</div>
</div><!-- end container -->
<!--</div><!-- end banner-wrap -->

---

Step 4. Add html coding

Just above the HTML coding you inactivated in Step 3, add the HTML coding below:

<section class="module parallax parallax-1">
<div class="container">
<div class="para">{parallax:content}</div>
</div>
</section>

code courtesy: callmenick.com

---

Step 5. Add css coding

Now click on "main-style.css" on the left and add the code below to it. Change the code in orange to the file name of the image you uploaded in Step 2.

/* Parallax
------------------------------------------------------------ */
.container {
  max-width: 960px;
  margin: 0 auto;
}

.para {
  padding:25% 0;
}

section.module:last-child {
  margin-bottom: 0;
}

section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}

section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}

section.module p:last-child {
  margin-bottom: 0;
}

section.module.content {
  padding: 40px 0;
}

section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module.parallax-1 {
  background-image: url("forest.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
}

code courtesy: callmenick.com

---

You're done! 
Publish your site to see your new parallax header!

---

comments powered by Disqus