Horiz/vert centered div on a 2-color background?

HTML & CSS
1

Trying to figure out how to lay this out. Here’s a quick mock-up of what I’m trying to do:

I figure I would crop out the earth portion like so:

… and put it in a horiz/vert centered div. What I’ve been unable to do so far is split the background into 2 divs so that the color split in the earth div lines up perfectly with the color split in the background, regardless of browser/monitor size.

Any links to a good tutorial on this? thanks.

2

Hi,

You could do it like this as Gary has mentioned using a two-tone background image.

http://www.pmob.co.uk/temp/earth.htm

However that will get a 1px jog in IE so make the actual earth image a transparent image without the black and grey parts so the jog is not noticed.

3

Why would you use 2 divs? Make the background a background image on the container the globe is centered in.

You can use the convert utility from the ImageMagick suite.

gt@koko:~$ convert -size 10x600 xc:black -size 10x600 xc:gray -append twotonebg.gif

<div #container>
  <img ...>  <!-- centered image -->
</div>
================
#container {
  background: url(twotonebg.gif) left middle repeat-x;
  }

cheers,

gary