CSS center image

[alanlee9898]

I hope someone can show me how to center images using CSS, which apply to all browser sizes.

Website: http://alphaalps.com/gallery.html

Currently only footer is center on every browser size.

Thanks!

[Arkinder]

You're positioning some of these elements the wrong way. To get it to center you will have to fix that. I'll make the changes red.
First we need to remove the margin-top from navigation .

div#navigation {
    z-index: 1;
}

And place it in the body rule.

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-top: 450px;
}

Alright, I'm going to just use one of these as an example, but you need to change them all.

div#accessories {
    float: left;
    margin-left: 470px;
    margin-top: -290px;
    position: absolute;
}

Needs to be:

div#accessories {
    float: left;
    left: 470px;
    top: -290px;
    position: absolute;
}

When using position: absolute; You can use the top and left properties to move elements on a page. This move them around a little. Add 8 pixels to the left for each element. So the above rule would be.

div#accessories {
    float: left;
    left: 478px;
    top: -290px;
    position: absolute;
}

This will shove a few things to the top of the page. Don't worry, it's supposed to happen.

div#navigation {
    position: relative; /* This will move the images back down and is what allows the properties below to work */
    width: 1135px; /* A set width is needed. Unfortunately this number is just what works for my screen. You could also use 94em. */
    margin: 0 auto; /* This is what's actually centering the images */
    z-index: 1;
}

Regards
Arkinder

[alanlee9898]

Thanks Arkinder! I will try with your code :)

[alanlee9898]

the center page is okay now, but how about http://alphaalps.com/company.html

There is "stealbar" on the background. How I can stick the background "stealbar" with the hanger ?

Thanks.

[luceduce]

Try changing your CSS code in the file style_company.css at line 6 from:

img.bg {
    background: none repeat scroll center center transparent;
    height: 100%;
    left: 0;
    min-height: 900px;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;

to

img.bg {
    background: none repeat scroll center center transparent;
    height: 100%;
    left: 0;
    min-height: 900px;
    min-width: 1024px;
    position: absolute;
    top: 0;
    width: 100%;

L.

[alanlee9898]

The stealbar is stick with the background now, but it has the white gap on the right, how can it solved? Thanks!

[Arkinder]

Remove width: 100%; from this CSS rule.

div#navigation {
    height: 350px;
    position: absolute;
    text-align: center;
    width: 100%;
}

Regards
Arkinder

[alanlee9898]

It's still have the white gap on the right, when you view the browser in smaller size, it has the white gap on the right.

Anyone know how to fix? :(

[Arkinder]

Oh,

Remove this:

img.bg {
  left: 50%;
  margin-left: -512px;
}

And change min-width: 1024px; to 101em. I suggest using the em unit for min-height too.

img.bg {
  min-height: 74em;
  min-width: 101em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0pt;
  left: 0pt;
}

Regards
Arkinder

[alanlee9898]

Thanks! solved!

[alanlee9898]

I got another question that why the background image will stretched when it is full screen? How I can make it full screen won't stretching the image?

Link: http://www.alphaalps.com

Thanks.

[Arkinder]

Since you're able to use position: fixed; with this page you could probably just remove the min-height .

Regards
Arkinder

[alanlee9898]

If I remove the min-height, there will be white box on the footer.

It will effect bigger screen size too?

[Arkinder]

Sorry, I really should look at it before saying anything. Try this:

img.bg {
    display: block;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}

Regards
Arkinder

[alanlee9898]

Tried already, its stretching the background image when you resize your browser.

I guess I have to separate the logo with the background. That's the only option I have now.

[Arkinder]

its stretching the background image when you resize your browser.

Well yeah. What else is it supposed to do when the original image is only 1341x768?

Regards
Arkinder

[alanlee9898]

you mean is too small the original image?

Anyway, Thanks Arkinder!

[Arkinder]

Yeah, if it were bigger then it wouldn't have to stretch on larger screen resolutions. The solution I provided causes it to be 100% on 1341x768 and down, but the image just isn't large enough to compensate for anything larger without stretching.

Regards
Arkinder

[rv1990]

hey why dont you use auto margin!
it can bring image at the center of the screen

[Arkinder]

hey why dont you use auto margin!
it can bring image at the center of the screen

Because that problem was already solved by the second post in this thread, and was followed by two more questions. Please read threads before posting in them.

Regards
Arkinder

[alanlee9898]

Thanks for the help, I have separated the logo with the background. Fixing the image to the center of the page. :)

[Arkinder]

Awesome, if you run into any more issues just post a new thread.

Regards
Arkinder