background image vertically centering

okay I need to center a background image both horizontally and vertically.

for horizontal it is easy and I used margin:auto; but I am having trouble figuring out how to center the background image vertically.

most of the information I found was for centering text vertically but I need it for an image more specifically for a background image.

thank in advance

 

#main { 
  background: url(some.jpg) center center no-repeat;
  }

Code (markup):

The first center centers the image horizontally, and the second centers it vertically. You could state it once, and it would apply to both.

See background-position.

cheers,

gary

 

it works for the body tag

if I use

but I need it for the main tag because I need to place the background image in the center and within it I need content.
If I center the body background then I still need to center the main container so I can input text.

the code above is not working.

 

because you have it as a <div> background - it will only center vertically according the div height vs. the background image size......

Why not make it the body background center center fixed - so that is and remains centered x and y and remains fixed.

 

so how do I get my content within the area that is width:800px; height:746px; which is centered both vertically and horizontally.

I can't use padding or margin because it will depend on the screen size.

 

If you could show me what you are trying to do - visually - with the background and whatnot, I'm sure I could help you better....

 

this is what i am talking about.

 

IS the content within the main div going to be fluid or fixed in height?

 

it will be fixed

 

margin-left: auto;
margin-right: auto;

add this to the div #main

 

yes that center's it horizontally but i also need it to center vertically.

 

How do you intend to center vertically when you don't know the visitors' screen heights or browser heights? Browsers know what to do if they're not as wide as your content: make a scrollbar and only try to center when there's room to do so.

They're dumber when it comes to vertical centering.

I find this too much extra code to bother doing it... instead if I need something similar I just fake it with some good amount of top padding on the body and on most screens this looks good enough. But here's a way to center a block vertically, since you know the height of it:
http://pmob.co.uk/pob/hoz-vert-center.htm

 

thanks it worked. stomme poes

i was trying to figure out how to work with display:table; tag