html - Maintaining a footer strip of background with CSS -


our design team has come concept uses full background image on landing page, has image on footer of remaining pages, main content being on white background.

so, quick mock illustrate concept, landing page might be:

enter image description here

while majority of site be:

enter image description here

this presents problem because don't know window size it's being displayed in, keep footer strip consistent across pages presumably have use whole-page background image , block of out in white.

i struggling in css (i'm back-end developer that's been roped in ). adopted following pattern sticky footer:

html{   height: 100%;   margin: 0; }  body {     background-image: url("istock-507452790.jpg");     margin: 0; padding: 0;     background-size: 100%;     height: 100%; }  .wrapper {   min-height: 100%;   background-color: white;   margin-bottom: -50px; }  .footer, .push {   height: 50px; }  <body>   <div class="wrapper">       content!     <div class="push"></div>   </div>   <footer class="footer">     footer!   </footer> </body>

but leads whole page being filled background colour specified on wrapper.

is there way white on of page , keep strip @ bottom? not averse using other sticky footer methods if necessary.

i have changed dom little. hope helps.

also can remove footer text if dont need it.

html, body {    margin: 0;    padding: 0;  }    body {    background-image: url('http://www.lavitaoggi.com/wp-content/uploads/2014/02/8e69oceano-acqua-bolle-aria-ossigeno.jpg');  }    .wrapper {    min-height: 90vh;    background-color: white;  }    .footer {    height: 10vh;    color: #fff;  }
<div class="wrapper">    content! loream  </div>  <footer class="footer">    footer!s  </footer>


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more