CSS and different size of monitor?

Question

Hi,

I am doing a website (WIP). I encountered some CSS problems, hope you guys can help me.

My current situation:

• I have am image, lets called it "bg.png" with the width about 2500px, and at the center of the background image has my logo.
• My website should target all size (from small 800 x 600 to 2400 x XXX) users.

My problems:

• How do I centralize the background image(bg.png), so that the logo always positioned in the centered(horizontally) of different size of monitors screen?

Answer 1

body { background: url('bg.png') 50% 50% no-repeat; }

This will place the image at full-size at the center of the page, and the user will see as much of this background image as their browser window permits.

Answer 2

If it was just a logo file you could use

<style>
img
{
    position:absolute;
    left:-50%;
    top:-50%;
    z-index:-1;
}
</style>

Answer 3

#your_img {
  width: 2500px; //In example 2500px
  margin: 50%;
  padding: -1250px; // 2500 divided by 2
}

It probably don't work on Internet Explorer, but you can use a little hack with position: absolute, as above

Answer 4

#your_img {

   position: absolute;
   left: 50%;
   margin: -1250px;
}

This solution is necessary, when you put img element onto another box. But be careful - it might change size of parent's box.