xARCHANGELSx Posted March 14, 2014 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
newbi3 Posted March 14, 2014 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
xARCHANGELSx Posted March 15, 2014 Author Posted March 15, 2014 I want "background.png" to be re-sized/scaled to users browser. Quote
Sebkinne Posted March 15, 2014 Posted March 15, 2014 In that case using percentages instead of pixels is probably what you want. Quote
xARCHANGELSx Posted March 15, 2014 Author Posted March 15, 2014 works perfect. Now just need it to display on mobile, im going to google, any help would be awesome. Quote
Sebkinne Posted March 15, 2014 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
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.