javascript - How do I get my logo, slideshow and image to cover my entire screen no matter the window size -


i 3 of these divs (logo, slideshow, , subslider) fit entire screen window no matter size. want mimic background:cover action in css 3 of these elements. research need in javascript can't seem work no matter try. note using drupal if changes anything... despite reading lot on subject, i'm way out of comfort zone when comes trying understand window resizing issues, help, advice, , code snippets godsend please!

all images , slideshow centered , stacked horizontally :) 

<div class="logo"> <img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="center passion development"> </div> <!-- *************slideshow***************-- --> <div id="slider"> <img src="sites/all/themes/cpd pro/images/slide1.jpg"/> <img src="sites/all/themes/cpd pro/images/slide2.jpg"/> <img src="sites/all/themes/cpd pro/images/slide3.jpg"/> <img src="sites/all/themes/cpd pro/images/slide4.jpg"/> <img src="sites/all/themes/cpd pro/images/slide5.jpg"/> </div>   <!-- *************below slideshow image***************-- --> <div class="subslider"> <h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation">  </h5> </div>

use vh unit in css. 100vh 100% of viewport's height, can make 3 divs heights sum 100vh.


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more