html - image randomizer in javascript -


i making html page image randomizer using code found somewhere. code, however, compels me set width , height in pixels. when use code on div image not scale bad fluid layout use. (when set width auto or 100% in css image doesn't show) how alter code works in fluid layout? here's css:

.stretcher { /*#bg {*/ position: absolute; left: 0px; top: 0px; z-index: -69; width:1366px; height:768px; } 

the head part of html:

<script type="text/javascript"> window.onload = function () {     var header = document.getelementbyid('bg');     var pictures = new array('bgs/1.jpg','bgs/2.jpg','bgs/3.jpg','bgs/4.jpg','bgs/5.jpg');     var numpics = pictures.length;     if (document.images) {         var chosenpic = math.floor((math.random() * numpics));         header.style.background = 'url(' + pictures[chosenpic] + ')';     } } 

and div in body:

<div class="stretcher" id="bg"></div> 

probably can set width , heigth 100% , image background cover:

jsfiddle

css:

.stretcher {     position: absolute;     left: 0px;     top: 0px;     z-index: -69;     width:100%;     height:100%; } 

js:

function cycle() {     var header = document.getelementbyid('bg');     var pictures = new array('http://advancement.georgetown.edu/advent/wallpapers/ui/img/1366x768/sealwp_1366x768.jpg', 'http://www.sonymobile.co.jp/xperia/docomo/so-01d/common/download/wallpaper/1366-768/xperiaplaywp_1366-768_bk02.jpg');     var numpics = pictures.length;     if (document.images) {         var chosenpic = math.floor((math.random() * numpics));         header.style.background = 'url(' + pictures[chosenpic] + ')';         header.style.backgroundsize = 'cover';     } }  cycle(); 

Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

Nuget pack csproj using nuspec -