xARCHANGELSx Posted March 14, 2014 Share Posted March 14, 2014 (edited) I just want to resize the image to fit the user's browser. Also, scale the image when the user changes the size of their browser. I am not very good at HTML5/CSS, lol Here is how my splash screen is displaying: http://postimg.org/image/kvfo77knt/ Here is the splash.html file: <!DOCTYPE html> <html> <head> <link rel="shortcut icon" href="$imagesdir/wifi-signal.ico" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Halifax WiFi - High Speed Hotspots Simplified!</title> <script type="text/javascript" language="JavaScript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <!-- preload button2 --> <body onLoad="MM_preloadImages('$imagesdir/button2.png')"> <!-- background image --> <img src="$imagesdir/background.png" style="position: absolute; top: 0px; left: 0px" width="1024" height="768" /> <!-- On mouseover, swap button1 with button2 --> <a href="$authtarget" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','$imagesdir/button2.png',1)"> <!-- button1 --> <img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px height="365"" id="Image10" /></a> </body> </html> <body onresize="resizeImage()"> <center> <table height="100%" width="100%"><td valign="middle"> <center><img onload="resizeImage()" margin="0" border="0" src="image.gif"></center> </td></table> </center> </body> Edited March 14, 2014 by winkillerx Quote Link to comment Share on other sites More sharing options...
newbi3 Posted March 14, 2014 Share Posted March 14, 2014 <img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px height="365"" id="Image10" /> Your issue is here. Your'e saying height="365"" It should be height:365px Also you need a ; after width: 360px Here is the corrected code. <img src="$imagesdir/button1.png" style="position: absolute; top: 169px; left: 323px; z-index: 1; width: 360px; height: 365px;" id="Image10" /> Quote Link to comment Share on other sites More sharing options...
xARCHANGELSx Posted March 15, 2014 Author Share Posted March 15, 2014 I want "background.png" to be re-sized/scaled to users browser. Quote Link to comment Share on other sites More sharing options...
Sebkinne Posted March 15, 2014 Share Posted March 15, 2014 In that case using percentages instead of pixels is probably what you want. Quote Link to comment Share on other sites More sharing options...
xARCHANGELSx Posted March 15, 2014 Author Share Posted March 15, 2014 works perfect. Now just need it to display on mobile, im going to google, any help would be awesome. Quote Link to comment Share on other sites More sharing options...
Sebkinne Posted March 15, 2014 Share Posted March 15, 2014 Again, using percentages will work for what you want to do. You could get more complex and change the behavior of the page if the screen size is below a specific value, but I think that's more than you really need. Just move everything from pixel sizes to percentages and you should be able to display it nicely across most screens. Best regards, Sebkinne Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.