HTML, CSS centering image problems

Problem centering image on website. Using HTML and CSS styles.
1. The image does not center/resize on a pc screen or an iphone properly. It cuts the image on both.
2. I would like it to be responsive and auto-resize the image for smaller screens and remove the border my code adds to the bottom of the page. See problem-image.jpg
3. What size should the image be so that it resizes fine on both larger and smaller screens.

I am a newbie at making websites, please be very specific as to how I should change the code in the index.html or style.css
Your help is greatly really appreciated ...
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.

On #showcase, change the positioning to centered, and add a background-size constraint:

        #showcase { display: block; min-height: 600px; margin-left: auto; margin-right: auto; width: 50%; background: url('../img/UnderConsLarge.png') no-repeat center center; background-size:contain; color: #ffffff; }

Open in new window

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
HelpMe01Author Commented:
Getting closer - It now centers on both, but when I look at it on an iphone. The image looks tiny. It does not expand to fill the left and right side. Is it because I ave min-height:600px ? If I change that the picture looks too small on a regular desktop.
See the attached picture.
HelpMe01Author Commented:
If I remove min-height:600px the picture disappears completely.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

No, not the min-height, it's the "width:50%".
From the screenshot, it is 50% the width of the container.

You could either use a media query to drop that attribute off at a certain point, but more interested in how you would want it to act?
Based on the size of that particular image, just dropping the width completely looks to act pretty well.
HelpMe01Author Commented:
You're awesome. That does help a lot. But I think the min-height affects the viewing on the iphone. It leaves a large gap on the top and bottom of image (Only on the iphone, looks ok on a desktop). Is there anyway to modify it so that It does not leave such a big gap on top and bottom of image. If I remove the min-height, the image disappears.
Try this:

- Remove the width:50% completely from the main showcase style
- in the media query for 768, add an override for #showcase setting the height to 80vw (which is 80% of the width of the window)

But curious, any reason you're doing this in css instead of putting the actual image inline?  You would probably have an easier time styling if the image was in the page.  And i'm assuming once you had content in there, you would need to remove the under construction anyway.

in any case, modified CSS as it is:

        body { font: 15px/1.5 Arial, Helvetica,sans-serif; padding: 0; margin: 0; background-color: #f4f4f4; }

        /* Global */
        .container { width: 80%; margin: auto; overflow: hidden; }

        ul { margin: 0; padding: 0; }

        .button_1 { height: 38px; background: #e8491d; border: 0; padding-left: 20px; padding-right: 20px; color: #ffffff; }

        .dark { padding: 15px; background: #35424a; color: #ffffff; margin-top: 10px; margin-bottom: 10px; }

        /* Showcase */
        #showcase { display: block; min-height: 600px; margin-left: auto; margin-right: auto; background: url('UnderConsLarge.png') no-repeat center center; background-size:contain; color: #ffffff; }

            #showcase h1 { margin-top: 100px; font-size: 55px; margin-bottom: 10px; }

            #showcase p { font-size: 20px; }

        /* Newsletter */
        #newsletter { padding: 5px; color: #ffffff; background: #35424a }

            #newsletter h1 { float: left; }

            #newsletter form { float: right; margin-top: 15px; }

            #newsletter input[type="email"] { padding: 4px; height: 25px; width: 250px; }

        /* Sidebar */
        aside#sidebar { float: right; width: 30%; margin-top: 10px; }

            aside#sidebar .quote input, aside#sidebar .quote textarea { width: 90%; padding: 5px; }

        /* Main-col */
        article#main-col { float: left; width: 65%; }

        /* Services */
        ul#services li { list-style: none; padding: 20px; border: #cccccc solid 1px; margin-bottom: 5px; background: #e6e6e6; }

        footer { padding: 5px; margin-top: 0px; color: #ffffff; background-color: #e8491d; text-align: center; }

        /* Media Queries */
        @media(max-width: 768px) {
            header #branding,
            header nav,
            header nav li,
            #newsletter h1,
            #newsletter form,
            #boxes .box,
            aside#sidebar { float: none; text-align: center; width: 100%; }

            header { padding-bottom: 20px; }

            #showcase h1 { margin-top: 40px; }

            #newsletter button, .quote button { display: block; width: 100%; }

            #newsletter form input[type="email"], .quote input, .quote textarea { width: 100%; margin-bottom: 5px; }

            #showcase { min-height:80vw; }

Open in new window

HelpMe01Author Commented:
I don't know much about coding. I thought CSS was the best way to do it.
Just playing starting out. baby steps. :-)
Thank you for all your time and help. Your rock !
HelpMe01Author Commented:
Snarf0001 was very knowledgeable and was quick to reply. His advise was right on.
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
Web Development

From novice to tech pro — start learning today.