html - Parallax Header Background Scaling Issue -


i have made parallax header cant seem working. either scales background of header or makes long, requiring me scroll lot. i'd have header that's full screen , when scroll down first section of body comes up.

main.css

.wrapper {     position: relative; }      .wrapper .title {         position: absolute;         top: 0;         left: 50%;         text-align: center;         text-transform: uppercase;         display: block;         font-weight: 700;         letter-spacing: 0.25em;     }          .wrapper .title:before {             content: '';             position: absolute;             bottom: -38px;             left: -35px;             width: 35px;             height: 38px;             background: url("images/shadow.png");         }          .wrapper .title:after {             -moz-transform: scalex(-1);             -webkit-transform: scalex(-1);             -ms-transform: scalex(-1);             transform: scalex(-1);             content: '';             position: absolute;             bottom: -38px;             right: -35px;             width: 35px;             height: 38px;             background: url("images/shadow.png");         }      .wrapper.style1 {         background: #e97770 url("images/overlay.png");         color: #eee;         color: rgba(255, 255, 255, 0.75);     }          .wrapper.style1 .title {             background: #e97770 url("images/overlay.png");             color: #fff;         }          .wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6, .wrapper.style1 strong, .wrapper.style1 b, .wrapper.style1 {             color: #fff;         }      .wrapper.style2 {         background: #fff;     }          .wrapper.style2 .title {             background: #fff;             color: #484d55;         }      .wrapper.style3 {         background: #f3f3f3 url("images/overlay.png");     }          .wrapper.style3 .title {             background: #f3f3f3 url("images/overlay.png");             color: #484d55;         }          .wrapper.style3 .image {             border: solid 10px #fff;         }  #header-wrapper {     background: url("../images/csbackground.jpg") center center;     background-size: contain;     background-repeat: no-repeat; }      #header-wrapper:before {         content: '';         position: absolute;         top: 0;         left: 0;         width: 100%;         height: 100%;         background: url("images/overlay.png");     }  #footer-wrapper {     background: #282b34 url("images/overlay.png");     color: #eee;     color: rgba(255, 255, 255, 0.5); }      #footer-wrapper h1, #footer-wrapper h2, #footer-wrapper h3, #footer-wrapper h4, #footer-wrapper h5, #footer-wrapper h6, #footer-wrapper strong, #footer-wrapper b, #footer-wrapper {         color: #fff;     }      #footer-wrapper hr {         border-top-color: #333;         border-top-color: rgba(255, 255, 255, 0.05);     }      #footer-wrapper form input[type="text"],     #footer-wrapper form input[type="email"],     #footer-wrapper form input[type="password"],     #footer-wrapper form select,     #footer-wrapper form textarea {         background: #ccc;         box-shadow: none;     }          #footer-wrapper form input[type="text"]:focus,         #footer-wrapper form input[type="email"]:focus,         #footer-wrapper form input[type="password"]:focus,         #footer-wrapper form select:focus,         #footer-wrapper form textarea:focus {             background: #fff;         }      #footer-wrapper input[type="button"],     #footer-wrapper input[type="submit"],     #footer-wrapper input[type="reset"],     #footer-wrapper button,     #footer-wrapper .button {         color: #fff;         box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.5);     }          #footer-wrapper input[type="button"]:hover,         #footer-wrapper input[type="submit"]:hover,         #footer-wrapper input[type="reset"]:hover,         #footer-wrapper button:hover,         #footer-wrapper .button:hover {             color: #fff;             box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.65);         }          #footer-wrapper input[type="button"]:active,         #footer-wrapper input[type="submit"]:active,         #footer-wrapper input[type="reset"]:active,         #footer-wrapper button:active,         #footer-wrapper .button:active {             box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.75);         }          #footer-wrapper input[type="button"].style2:active,         #footer-wrapper input[type="submit"].style2:active,         #footer-wrapper input[type="reset"].style2:active,         #footer-wrapper button.style2:active,         #footer-wrapper .button.style2:active {             box-shadow: inset 0px 0px 2px 0px rgba(255, 255, 255, 0.75);         }      #footer-wrapper .title {         background: #282b34 url("images/overlay.png");         color: #eee;     }      #footer-wrapper header.style1 h2 {         color: #fff;     }      #footer-wrapper header.style1 .p {         color: inherit;     }      #footer-wrapper .feature-list section {         border-top-color: #333;         border-top-color: rgba(255, 255, 255, 0.05);     }      #footer-wrapper .feature-list h3:before {         background: #3d4249 url("images/overlay.png");     }

custom.css

#textlayer { text-align: center; vertical-align: middle; margin-top: 100px; z-index: 2; }  #greenshirtlayer { margin-top: 100px; z-index: 2; }

index.html

        <!-- header -->             <div id="header-wrapper" class="wrapper">                 <div id="header">                      <!-- nav -->                         <nav id="nav">                             <ul>                                 <li class="current"><a href="index.html">home</a></li>                                 <li>                                     <a href="#">dropdown</a>                                     <ul>                                         <li><a href="#">lorem ipsum</a></li>                                         <li><a href="#">magna veroeros</a></li>                                         <li><a href="#">etiam nisl</a></li>                                         <li>                                             <a href="#">sed consequat</a>                                             <ul>                                                 <li><a href="#">lorem dolor</a></li>                                                 <li><a href="#">amet consequat</a></li>                                                 <li><a href="#">magna phasellus</a></li>                                                 <li><a href="#">etiam nisl</a></li>                                                 <li><a href="#">sed feugiat</a></li>                                             </ul>                                         </li>                                         <li><a href="#">nisl tempus</a></li>                                     </ul>                                 </li>                                 <li><a href="left-sidebar.html">left sidebar</a></li>                                 <li><a href="right-sidebar.html">right sidebar</a></li>                                 <li><a href="no-sidebar.html">no sidebar</a></li>                             </ul>                         </nav>                         <ul id="scene">                             <li class="layer" id="textlayer" data-depth="0.1"><img src="{%  static 'images/communityscholartext.png' %}"></li>                             <li class="layer" id="greenshirtlayer" data-depth="0.5"><img src="{%  static 'images/greenshirtcloud.png' %}"></li>                             <li class="layer" id="leftcloudlayer" data-depth="0.4"><img src="{%  static 'images/leftcloud.png' %}"></li>                             <li class="layer" id="pinkshirtlayer" data-depth="0.3"><img src="{%  static 'images/pinkshirtcloud.png' %}"></li>                             <li class="layer" id="redshirtlayer" data-depth="0.2"><img src="{%  static 'images/redshirtcloud.png' %}"></li>                         </ul>                 </div>             </div>


Comments

Post a Comment

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

c# - Update a combobox from a presenter (MVP) -

i using mvp in project, new in mvp. have 2 comboboxes. when select option in combobox, combobox should filled new data. this action in presenter. view 'view1' in presenter, , introduced combobox1 , combobox2 properties in 'view1', because need 'datasource', 'displaymember', 'valuemember' , 'refresh()' in method below. but, when using pattern, enough send property like public string combobox2 { { return combobox1.selectedvalue.tosstring(); } } into presenter not whole combobox. how can solve problem? public void onselectedindexchangedcombobox1() { if (view1.combobox1.selectedindex == -1) { return; } datatable dt = tools.getdatatable("a path"); var query = (from o in dt.asenumerable() o.field<string>("afield") == farmerview.combobox1.selectedvalue.tostring() orderby o.field<string>("anotherfield") select...
Read more

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -

i trying put lock on table while writing on table , if happened in between roll-back . trying convert below code lock table test_g1 read; lock table test_g write; -- begin; start transaction; insert test_g1 values(143); insert test_g values(145); select * test_g1; select * test_g; rollback; select * test_g; unlock tables; how convert above code @transactional spring jdbctemplate code? @transactional(rollbackfor={dataaccessexception.class}) public void test(){ jdbctemplate.execute("insert test1 (id, nam) values (4, 'a')"); throw new dataaccessexception("error") { }; } here trying throw error, insert statement should rollback it's not happening . thanks edit-1 attaching code , doing in jdbcdaoimpl.java , mentioned problem comment above test() . app.java package com.cgiri.javabrains.spring4; import org.springframework.beans.factory.annotation.autowired; import org.springframework.context.applic...
Read more