Geek Answers Handbook

CSS and various monitor sizes?

I am making a website (WIP). I ran into some CSS issues, hope you guys can help me out.

My current situation:

  • I have an image, let's call it "bg.png" with a width of about 2500 pixels, and my logo will be in the center of the background image.
  • My site should focus on the entire size (from small 800 x 600 to 2400 x XXX) users.

My problems:

  • How to centralize the background image (bg.png) so that the logo is always located in the center (horizontal) of the screen of different sizes of monitors?
+6
css image background-image
source share
4 answers
body { background: url('bg.png') 50% 50% no-repeat; }

This will place the full-sized image in the center of the page and the user will see as much of this background image as their browser window allows.

+4
source share

If it was just a logo file, you could use

 <style> img { position:absolute; left:-50%; top:-50%; z-index:-1; } </style>
0
source share
 #your_img { width: 2500px; //In example 2500px margin: 50%; padding: -1250px; // 2500 divided by 2 }

It probably doesn't work in Internet Explorer, but you can use a little hack with the position: absolute, as mentioned above

0
source share
 #your_img { position: absolute; left: 50%; margin: -1250px; }

This solution is necessary when you put the img element in another field. But be careful - this can change the size of the parent window.

0
source share

More articles:


All Articles