CODEWITHSUNDEEP
jqueryhtmlcss
Jon
Jon

Reputation: 3184

Static Backgrounds With Scrolling Content On Top

I'm interested in emulating the background effect seen here: (Link). Basically it's a static background with scrolling content over top, but there are different background for each "window" section on the page. See below:

enter image description here

Scroll down further:

enter image description here

My initial thought was to just have one huge static background with each "window image" stacked on top of each other vertically, and then have divs with transparent backgrounds on top, but this seems wrong.

How can I reproduce this effect?

Upvotes: 3

Views: 2177

Answers (3)

Mike Terry
Mike Terry

Reputation: 41

How about you buy that premium them on theme forest that you are trying to copy. There are many parallax scrolling tutorials on the web that will walk you through this.

Upvotes: 1

Marty Cortez
Marty Cortez

Reputation: 2343

In general:

  1. Use fixed CSS positioning for the top bar (as mentioned above)
  2. Give your foreground container a greater z-index than your background container
  3. Make the backgrounds of certain sections "invisible" by setting their opacity to 0

You'll want to experiment with the width of your background image and foreground containers to get things right. Good luck!

Upvotes: 4

secretformula
secretformula

Reputation: 6432

You can use fixed css positioning to get the effect of the top bar. Then for the rest of the page I would use some sort of encapsulation div that is shifted downward by the height of the top bar using relative css positioning. Then for your different page sections just have divs which are stacked one after another and just have different backgrounds.

Link relating to css positioning

Upvotes: 0

Related Questions