Prevent window from clipping vertically & horizontally positioned image

HDRebel88 · 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.

CroNiX · December 3, 2014

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

HDRebel88 · December 4, 2014

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

Sign In

Prevent window from clipping vertically & horizontally positioned image

Recommended Posts

HDRebel88

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

HDRebel88

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information