1 Replies - 631 Views - Last Post: 10 October 2013 - 11:12 AM

#1 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

New to Parallax Scrolling

Posted 09 October 2013 - 10:49 AM

Hi everyone! I'm new to parallax scrolling (and HTML5 in general). Can you please check out this webpage I'm working on and try and figure out what's wrong on the last section background? The picture should be lower down, the top of the picture is cut off. That leaves white space at the bottom of the webpage.

URL: testing.theinnovationteacher.com

Here is the CSS controlling the final section:
#random1 { 
  background: url("http://i1.ytimg.com/vi/NyytYzQ7j0w/maxresdefault.jpg") 50% 0 no-repeat fixed;
  min-height: 1000px; 
  height: 1000px; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
 
#random1 article { 
  height: 458px; 
  position: absolute; 
  text-align: center; 
  top: 150px; 
  width: 100%; 
}



Thanks in advance!

This post has been edited by maniacalsounds: 10 October 2013 - 10:49 AM


Is This A Good Question/Topic? 0
  • +

Replies To: New to Parallax Scrolling

#2 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: New to Parallax Scrolling

Posted 10 October 2013 - 11:12 AM

I tried running this code in IE and Google Chrome and on both browsers it renders whitespace at the bottom. However, Chrome has much more whitespace than IE.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1