2 Replies Latest reply on Feb 26, 2010 11:41 AM by jonboy0000

    html background - centered, fit-screen (not strectched, keeps res.) SOLVED!?

    jonboy0000

      So I was just about to post this as a question, because it was bugging me for a couple hours now - but just as I was about to I came up with an idea, and it seems like it worked:

       

      I want a simple background. The image is wider than tall, about 3:1. So I wanted the height to be at 100% and whatever hung off left/right was fine. I also needed it centered.. I STILL THINK THERE HAS TO BE AN EASIER WAY TO DO THIS THOUGH?!

       

      But what I did was this:

       

      cut the image down the middle and split it into 2 images. Then, first thing I put into the body:

       

      ---

       

      <body>

      <img src="images/background2.jpg" alt="background image" id="bg2" /> <!-- images with z-index=0

      <img src="images/background2.jpg" alt="background image" id="bg3" />

       

      [body of the website] <! body tags with z-index=1

       

      </body>

       

      ---

       

      the CSS:

       

      }

      img#bg2 {

      height:100%;

      bottom: 0px;

      position: absolute;

      overflow: hidden;

      z-index: 0;

      right: 50%; <!-- 1st image I push halfway from the right

      }

      img#bg3 {

      height:100%;

      bottom: 0px;

      position: absolute;

      overflow: hidden;

      z-index: 0;

      left: 50%; <!-- 2nd image I push halfway from the left

      }

       

      And then the images meet in the middle and everyone's happy..

      But come on, there is an easier way, right?