HTML background with css and javascript

Question

I am clueless about the background of http://startupgiraffe.com/

I have searched a lot about creating background with shapes and css but of no use. Can some one please guide me towards creating a background like http://startupgiraffe.com/.

Thanks

Joren · Accepted Answer · 2013-07-10 18:24:02Z

1

As you can see in the source code op startupgiraffe; there are multiple "background" parts:

<section id="background-wrapper" class="full-wrapper">

  <section id="first-background">
    <div id="scroll-trigger"></div>
  </section>

  <section id="second-background">
  </section>

  <section id="third-background">
  </section>

  ----

</section>

They have used a lot of javascripting to dynamically switch between the background sections resulting in a concatenated background.

If you would like to replicate this behavior or learn more details about it, I suggest you start looking at the source code of the html, css and javascript. You could also use your browsers analysis tools (firebug, chrome's console) to find out more of the website's behavior.

answered Jul 10, 2013 at 18:24

Joren

3,37327 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rich Bradshaw · Accepted Answer · 2013-07-10 18:19:16Z

1

First step is fire up Chrome's dev tools (or whatever you like – Chrome is good), go to Network, and click images at the bottom:

Dev Tools

That lets you see what's going on.

In short though, absolute positioning in CSS + lots of images.

answered Jul 10, 2013 at 18:19

Rich Bradshaw

73.3k46 gold badges190 silver badges241 bronze badges

Collectives™ on Stack Overflow

HTML background with css and javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related