Image fails to center when screen is very narrow

greetings bbdesign, I looked at the .jpg  image you have as  1.jpg  and also the TWO lines of CSS for the Div id of  "homebg", , and I may not be able to understand your Browser display output, or help much with this. But I do have questions about your display problems you have below the "700px wide".
In Your Image 1.jpg , there are Display adaption changes with the different widths you have in the 4 displays there.
There is a top navigation bar that is "white" with a "Herbein Mangement" label, and the smaller ones, collapse the bar choices to a single touch MENU , this shows me that there is more complex width "Responsive" engine for your display.

As to your - Div id of  "homebg" - problem, you have CSS That I simply do not understand, as -
    { top:0; left:50%; width:100%; }

It changes the Left-positioning to the 50% spot, of the container's width, and then trys to use a width of 100%, Shouldn't the width be 50% or less if the left position is 50% ? ?  BUT in all of the 4 images the background image (images) is ALWAYS showing at the far left (css left:0;) of the display, so I wonder why it sets
     { left:50%; width:100%; }
and in the css for images it has -
     { position:absolute;  top:0;  left:-100%; }
it uses a LEFT positioning as left:-100%;  a NEGATIVE number, is a negative used here to compensate for the {left:50%;} used in the DIV ? ?

there is also the image css of {min-width:initial;}
which may or may not be part of your problem, as I have used the css keyword "initial", I take it to mean that your image width will NEVER go below the first width specified in the CSS or the image's actual width. This seems to be contrary to any Resonsive design, as you need the image to go as small as needed.

But My Main Concern here is that this is a "Layered" display with the <div id="homebg"> has a  {z-index:0;} and the DIV that displays the "We See Potential" has a higher z-index.
For Me, the layered display is a bit more difficult to have a correct "Responsive" output than a non-layered display.
Maybe you can give more info about the relationships of the layers, and at least some info about the css logic for the images -
    div#homebg img{position:absolute;top:0;left:-100%; ...
css settings for 700px?

Also in using Images, and wanting to have the Images centered, you need to have either the width OR height be responsive but the way you seem to do it it adjust the height, and then the image is TOO WIDE and not centered.

The confused results you are getting are because the browser is confused by the incomprehensible CSS.

The validator reports 17 errors in main.css which may be contributing.  I cannot understand why you are use an adaptive unit like percentage instead of responsive units vh and vw for widths and positioning.  Percentages always distort at some point when they are used for positioning and trying to maintain relationships.  I would suggest you cleanup the CSS first, and then we will have a better idea of what is warping the relationships.

Cd&

I haven't used VH and VW because of the bad browser support (so far). I will look into the CSS problems. I am using a percentage, but I am only using 50%, no oddball percentages like 23.194837384, so I thought that would be safe enough. As I said, it works perfectly up until the browser reaches a certain (narrow) size.

I will check into the other suggestions as well. Thanks for looking!

Now that you mention it, It does keep the image centered, in some of the widths, But it does not seem to be consistent for that all the time, I feel that there are more than one CSS change (alteration as changing) for height, width and left placement, that some how conflict with other changes at certain points of variance, and I see the image center move right-wards. If I were debugging this CSS, I would remove a CSS change factor (width or height, or left-placement) and see what it effects. If it was me, I believe for widths below 700px, I would NOT change the left-positioning, but place it a left zero, and adjust the height AND width to 100% , although there would be rendering image stretch distortion , It may be a better view, than the reduced display (crop) that now is suppose to happen.
Also I would think that a much larger image in height, would allow just width size adjustment (100%) and have it cover the area even though it was in mobile portrait view.

To better illustrate what is going on here, I setup a test page and removed all the external file references. Here is the URL and the complete HTML with inline CSS:

http://secure.bbdesign.com/herbeinwealth/test.htm

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body style="margin:0;padding:0;">

<div style="position:fixed;top:-50%;left:-50%;width:200%;height:200%;">
	<img style="position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;min-width:50%;min-height:50%;" src="img/ph_home1.jpg" />
</div>

</body>
</html>

Select allOpen in new window

This technique (which I originally got from http://css-tricks.com) works until the browser window gets to a certain (small) size. Then the image stops reducing, I guess this is related to the min-width and min-height. However, those settings are what makes this work at the larger screen sizes.

I would love if I could get this technique to also work on small devices, as I am trying to make this responsive.

Thanks!

Thanks for looking, guys. I agree that the technique does not seem to be applicable to mobile devices.