HDRebel88 Posted December 3, 2014 Share Posted December 3, 2014 I have a vertically and horizontally centered image within a window. The layout as is perfect. The only issue is that when the window is resized, the image is clipped by the browser window. I wanted the image to remain 100% within the scroll bars of the window, so the page can be scrolled, so you can access any part of the image with the scroll bars. Development URL: http://www.tinasguitar.com/develop/ (Resize the window and you'll see what I mean. CSS and HTML follow: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} body{ padding: 0; margin: 0; margin: 0 auto; text-align: center; background-color: #dcdcdc; } #wrapper { top: 50%; left: 50%; margin-top: -333px; /* Half the height */ ; /* Half the width */ position: absolute; } #bgImage { width: 960px; height: 667px; background: url("http://www.tinasguitar.com/bg.jpg"); } #socialBar { position: absolute; top: 80px; left: 100px; } #socialBar img { width: 33px; height: 33px; background-image: url("http://www.tinasguitar.com/social.png"); background-repeat: no-repeat; margin-left: 10px; } #twitter { background-position: -34px 0px; } #fb { background-position: -102px 0px; } #yt { background-position: -68px 0px; } #gp { background-position: 0px 0px; } <!DOCTYPE html> <html lang="en-US"> <head> <base href="http://www.tinasguitar.com/" /> <title>Tina S.</title> <meta charset="utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="index, follow" name="robots" /> <link href="/develop/style.css" rel="stylesheet" type="text/css" /> </head> <body> <section id="wrapper"> <img src="transparent.png" id="bgImage" name="bgImage" usemap="#vigierguitars"> <div id="note">This is an unofficial fan site that links to Tina's official social networking pages. The owner of this site has no affiliation with Tina.</div> <div id="socialBar"> <a href="https://twitter.com/Tina_S__"><img alt="Twitter" id="twitter" name="twitter" src="transparent.png" title="Twitter" /></a> <a href="https://www.facebook.com/pages/Tina-S/181555232026760"><img alt="FaceBook" id="fb" name="fb" src="transparent.png" title="FaceBook" /></a> <a href="https://plus.google.com/+TinaS"><img alt="Google+" id="gp" name="gp" src="transparent.png" title="Google+" /></a> <a href="https://www.youtube.com/user/malabar777"><img alt="YouTube" id="yt" name="yt" src="transparent.png" title="YouTube" /></a> </div> </section> <map name="vigierguitars"> <area shape="rect" coords="700,520,865,620" href="http://www.vigierguitars.com/" alt="Vigier Guitars" target="_blank"> </body> </html> Basically I need to some how create a hard border that the browser window observes as the definitive borders of the page, so the browser window can't clip off portions of the image. Quote Link to comment https://forums.phpfreaks.com/topic/292866-prevent-window-from-clipping-vertically-horizontally-positioned-image/ Share on other sites More sharing options...
CroNiX Posted December 3, 2014 Share Posted December 3, 2014 (edited) Have the image at 100% within its container. You're hardcoding px values so it will always be that size no matter the browser size. Edited December 3, 2014 by CroNiX Quote Link to comment https://forums.phpfreaks.com/topic/292866-prevent-window-from-clipping-vertically-horizontally-positioned-image/#findComment-1498397 Share on other sites More sharing options...
HDRebel88 Posted December 4, 2014 Author Share Posted December 4, 2014 (edited) The below makes it so I can scroll vertically, but horizontally still gets clipped: article, aside, figure, footer, header, hgroup, main, menu, nav, section{display: block;} body{ padding: 0; margin: 0 auto; text-align: center; background-color: #dcdcdc; min-width: 1000px; } #wrapper { top: 50%; left: 50%; margin-top: -333px; marginleft: -480px; position: absolute; } #bgImage { min-width: 960px; min-height: 667px; width: 100%; height: 100%; background: url("http://www.tinasguitar.com/bg.jpg") no-repeat; } #socialBar { position: absolute; top: 80px; left: 100px; } #socialBar img { width: 33px; height: 33px; background-image: url("http://www.tinasguitar.com/social.png"); background-repeat: no-repeat; margin-left: 10px; } #twitter { background-position: -34px 0px; } #fb { background-position: -102px 0px; } #yt { background-position: -68px 0px; } #gp { background-position: 0px 0px; } The issue is I don't want it to resize the image, I want to force a hard minimum size of the body of the page so when the window is shrunk down the browsers minimum width is the width of the picture (if the window is smaller than the minimum width, then the window should be scrollable to access all portions of the image). This is because I am absolutely positioning another image over it that needs to stay in that exact location and the same size. I'm beginning to suspect this isn't possible. Not really surprising, seems the "powers that be" of HTML and CSS are making the language more and more difficult to accomplish what you want to with every subsequent revision. As soon as I hear "you can't do that", I think "flaw in the design of the system". I may just have to not vertically center (still don't understand why there isn't a simple verticle-align css rule to vertically center something within a page or within a containing element. This bullshit work around crap couldn't be any more irritating; especially since it never works. Edited December 4, 2014 by HDRebel88 Quote Link to comment https://forums.phpfreaks.com/topic/292866-prevent-window-from-clipping-vertically-horizontally-positioned-image/#findComment-1498404 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.