i'm new front end , i'm trying make page cant scrolled. want size of background. when position hand image @ bottom of page resizes window. window scroll bar slides on own when hand moves. how make sure keep size fixed?
html -
<!-- page content --> <div class="container"> <div class="row"> <div class="wrapper"> <ul id="scene"> <li class="layer" id="bluelayer" data-depth="0.0"><img src="{% static 'images/aboutus/bluelayer.png' %}"></li> <li class="layer" id="booklayer" data-depth="0.0"><img src="{% static 'images/aboutus/book.png' %}"></li> <li class="layer" id="coffeelayer" data-depth="0.0"><img src="{% static 'images/aboutus/coffee.png' %}"></li> <li class="layer" id="handslayer" data-depth="0.6"><img src="{% static 'images/aboutus/hands.png' %}"></li> <li class="layer" id="keyboardlayer" data-depth="0.0"><img src="{% static 'images/aboutus/keyboard.png' %}"></li> <li class="layer" id="pencilonelayer" data-depth="0.0"><img src="{% static 'images/aboutus/pencil1.png' %}"></li> <li class="layer" id="penciltwolayer" data-depth="0.0"><img src="{% static 'images/aboutus/pencil2.png' %}"></li> </ul> </div> </div> </div> css -
body { margin-top: 0px; margin-bottom: 0px; background: none; } .full { background: url(../images/aboutus/desk.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #bluelayer { margin-left: -9.5em; margin-top: -50px; width: auto; position: fixed; z-index: 3; } #booklayer { margin-left: -5em; margin-top: 350px; z-index: 1; } #coffeelayer { margin-top: 400px; margin-left: 80em; z-index: 1; } #handslayer { margin-top: 400px; margin-left: 25em; z-index: 2; position: fixed; } #keyboardlayer { margin-top: 400px; margin-left: 25em; z-index: 1; } #pencilonelayer { margin-top: 550px; z-index: 1; } #penciltwolayer { margin-top: 450px; margin-left: 70em; z-index: 1; }
why not try overflow: hidden; on container start. i'm not 100% clear on you're working here
Comments
Post a Comment