Question

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.