Image fails to center when screen is very narrow

This is the page I am testing:

I have CSS media queries setup for anything under 700px wide. My problem happens at narrower than that, though. See attached screenshot, the image is not centered properly (the divider line between the two halves of the image should be in the middle).

Here is the HTML:
<div id="homebg">
	<img src="img/ph_home1.jpg" alt="We Provide Direction: We chart a financial course that reflects your family, career, 401(K) plans, charitable aspirations and much more." />
	[two more images]

Open in new window

Here is the CSS for under 700px wide:
div#homebg img{position:absolute;top:0;left:-100%;width:auto;height:100%;min-width:initial;min-height:initial;}

Open in new window

Have I reached a limit in my browser? Or is there some way to fix this in my code?

Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.

Brad BansnerWeb DeveloperAuthor Commented:
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!
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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.
Brad BansnerWeb DeveloperAuthor Commented:
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:

<!DOCTYPE html>

<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">
<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" />


Open in new window

This technique (which I originally got from 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.

OK, , I worked on this some yesterday and today, however, this uses "Tricks" and CSS settings that I was not familiar with. I had not worked with a CSS setting of "fixed" and have the inner elements as "position:absolute;", this uses a "trick" to have the container <div> and the inner image be somewhat responsive, by having a "complex" dependency for browser display "width" and "height" and then moving the image placement farther to the left, as the height seems to be set at around 100% , , and the width is larger than the display width, , to center the image.

As your problem is for smaller display widths, I could not figure out the CSS tricks for the use of several settings like -
    "min-width:initial;  min-height:initial;"

however, my problem was have any consistency in various css settings for smaller display, as there are "Overlaps" for widths-heights in landscape and portrait modes of mobil devices, which I do not see a way to have an easy fix and keep the "concept" of the changing size image, that is always centered in landscape or portrait mode.

I just do not have the time to to keep experimenting with this concept, I do not feel that this technique from css-tricks was developed for mobil devices, but I could be wrong.

I looked at the browser display for your last CSS where you change the div css to -
     top:-50%; left:-50%; width:200%; height:200%;

I did not see this as being a very effective set up to get what you want for smaller widths.

you may be able to incorporate the CSS device selectors like -
      @media  (max-device-width: 700px) and (orientation: landscape) { img{left:0; top0; width:100%; height:100%; } }

which, may set the Image to the top left of display, and have the width and height as 100% . which seems acceptable in wider displays.

but as I said, doing a workable setting for portrait mode, will take some time and considerations on what you may have to compromise on the image (stretch or crop) to get a workable display.

as I said before the css tricks (left:-100%;) to get the left to change with the changing image size, is a bit more than I can figure to work all the time every time (landscape AND portrait), but I do not have so much time.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for looking, guys. I agree that the technique does not seem to be applicable to mobile devices.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.