plznty Posted October 12, 2009 Share Posted October 12, 2009 I have been using <html> <head> </head> <title>IP in networking</title> <body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"> <div id="bg"><img src="/site/background.png" width="100%" height="100%" alt=""></div> <div id="content"><p></p></div> <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} /* prepares the background image to full capacity of the viewing area */ #bg {position:fixed; top:0; left:0; width:100%; height:100%;} /* places the content ontop of the background image */ #content {position:relative; z-index:1;} </style> <!--[if IE 6]> <style type="text/css"> /* some css fixes for IE browsers */ html {overflow-y:hidden;} body {overflow-y:auto;} #bg {position:absolute; z-index:-1;} #content {position:static;} </style> <center> <a href="site/index.htm" target="main">home</a> <p><iframe frameborder="no" name="main" src="/site/index.htm" width="600" height="300" allowtransparency="yes"></iframe></p> </center> </body> </html> it stretches it but it shows me the image properties when i hover over any part of the image. How do I stretch the non selectable background image of the page. Link to comment https://forums.phpfreaks.com/topic/177395-how-do-i-stretch-a-background-image/ Share on other sites More sharing options...
xsist10 Posted October 12, 2009 Share Posted October 12, 2009 You can layer another transparent div over your entire background which will prevent people getting image properties when hovering over the background. That or move to browsers that support CSS 3 exclusively.... (i.e.: burn IE and be done with it). <div id="bg"><img src="/site/background.png" width="100%" height="100%" alt=""></div> <div id="bg-layer"></div> <div id="content"><p></p></div> ... <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} /* prepares the background image to full capacity of the viewing area */ #bg, #bg-layer {position:fixed; top:0; left:0; width:100%; height:100%;} #bg-layer {z-index: 1;} /* places the content ontop of the background image */ #content {position:relative; z-index:2;} </style> Link to comment https://forums.phpfreaks.com/topic/177395-how-do-i-stretch-a-background-image/#findComment-935334 Share on other sites More sharing options...
plznty Posted October 12, 2009 Author Share Posted October 12, 2009 You can layer another transparent div over your entire background which will prevent people getting image properties when hovering over the background. That or move to browsers that support CSS 3 exclusively.... (i.e.: burn IE and be done with it). <div id="bg"><img src="/site/background.png" width="100%" height="100%" alt=""></div> <div id="bg-layer"></div> <div id="content"><p></p></div> ... <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} /* prepares the background image to full capacity of the viewing area */ #bg, #bg-layer {position:fixed; top:0; left:0; width:100%; height:100%;} #bg-layer {z-index: 1;} /* places the content ontop of the background image */ #content {position:relative; z-index:2;} </style> It still shows image properties sign at top left when i hover over. Link to comment https://forums.phpfreaks.com/topic/177395-how-do-i-stretch-a-background-image/#findComment-935341 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.