1 Reply Latest reply: Apr 4, 2012 6:12 AM by Ben M RSS

    Centre wide image without horizontal scroll

    m00n_s00n

      Hi

       

      I wonder if somebody could help me out.

      I have a website header image which is extra-wide to accommodate for any screen size.

      The person I’m making the website for loves the design but is dead-set against background images (various reasons I won’t go into).

       

      Is there a way to keep the header image centred without the whole page stretching to the pixel width of the header (and without RESIZING the image to fit any screen size)? So that the sides of the header are just cropped off?

       

      Any help would be hugely appreciated!

        • 1. Re: Centre wide image without horizontal scroll
          Ben M MVP

          Unfortunately if you place it as an image, the page will have scroll bars and the only way to avoid that is to use a background which is not an option. 

           

          Personally speaking, you should really consider making the header image that can stretch to any screen size because "extra-wide" is a matter of opinion rather than a stated width.  For instance, let's say I have an old laptop with an 800x600 resolution, a cheap Dell monitor with 1280x1024 resolution and a nice iMac with a 2560x1440 resolution.  Would the extra wide only fit the iMac? Or maybe it would look ok on the Dell?

           

          The point I am trying to get at is that first, sit down with your client and go over their web stats to determine an optimal width, not just extra-wide because it looks nice.  Then cut up that header and code it in CSS with repeating backgrounds as needed and static images on top.