Centering a title image...

**chadlexmorgan** · 08-13-2013, 11:46 PM

Here is a link to my site:

http://www.rezzurrectiontaxidermy.com/

Problem: The title image moves on different screen sizes. On a 20" monitor is how it should look but going down to a 15 or going wider moves the image to the right for some reason. Could someone check out my code and see what I am doing wrong or not doing. Thanks!!

**jscheuer1** · 08-14-2013, 04:42 AM

Where you have it, it's a child of an element that's narrower than it is. It really should be a child of either the body or the wrapper (pagewrap).

Moving it to here with the styles as indicated looks about right:

Code:

<body >

	<div id="pagewrap">
		
		<div id="bg"><img src="./Rez_Pics/Logo2.jpg" width="100%" /></div>

	<div id="content1">		
		<div id="filter"></div>		
		<div id="white_line"></div>
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="">Gallery</a></li>
				<li class="item2"><a href="">Tips & Hints</a></li>
				<li class="item3"><a href="">About</a></li>
				<li class="item4"><a href="">Contact</a></li>
				
			</ul>
		</div>
	</div>
	<div style="position:absolute; width: 500px; height: 375px; top: 20px; left: 50%; margin-left: -250px;"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
	</div>


</body>

Notes: I removed the id to avoid any conflict with styles set for it in the stylesheet. These styles can and should be in the stylesheet. The existing ones for it in the stylesheet should be removed. Then it's id can be restored and used to set it to these new styles in the stylesheet.

**chadlexmorgan** · 08-15-2013, 02:22 AM

Thanks again John, that worked perfectly. One more question if I may, on a wide screen monitor it is cutting the bg img in half. Is it an issue with the media-queries or something else?? Thanks

**jscheuer1** · 08-15-2013, 04:32 AM

Do you mean the 3x3 image - the actual background image, or the 600x429 image, the image src attribute of the img tag located in the bg div?

And do you mean in half exactly, or just that part of it is cut off?

And do you mean cut vertically, or horizontally?

**chadlexmorgan** · 08-15-2013, 08:04 AM

The image src attribute of the img tag located in the bg div, cut horizontally. You would have to scroll to see the rest of the image.

**jscheuer1** · 08-15-2013, 10:33 AM

OK, that's what I thought, but as I got into the explanation, I wasn't sure. That image is 600x429, an aspect ratio of 1.4 and has it's width specified (100%) but not its height, so it will scale (maintain that aspect ratio) regardless of how wide it is. So, unless the window is also at that same aspect ratio, either part of the bottom will be cut off or there will be blank space at the bottom. In many cases where the bottom is cut off, there's enough 'empty' space at the bottom of the image that you don't notice much. But at a certain point, you do.

Now there may be a way, but I can't think of one right now, to do this without the CSS 3 background-size property, which means it will not scale in IE 8 and less, but IE 9+ and all other modern browsers will be fine in almost all widow shapes and sizes, IE 8 and less should be acceptable, in them the image will show in its native dimensions:

Code:

<body >

	<div id="pagewrap">
		
		<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>

	<div id="content1">		
		<div id="filter"></div>		
		<div id="white_line"></div>
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="">Gallery</a></li>
				<li class="item2"><a href="">Tips & Hints</a></li>
				<li class="item3"><a href="">About</a></li>
				<li class="item4"><a href="">Contact</a></li>
				
			</ul>
		</div>
	</div>
			<div style="position:absolute; width: 500px; height: 375px; top: 20px; left: 50%; margin-left: -250px;"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
	</div>


</body>

**chadlexmorgan** · 08-15-2013, 11:09 PM

John, perfect!! Thank you!! Very much appreciated!

**jscheuer1** · 08-16-2013, 02:49 AM

Great! I just figured out how to get it to scale in IE 8 and less, just put this in the head of the page:

Code:

<!--[if lt IE 9]>
<style type="text/css">
#bg {
	background-image: none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->