Advice required regarding banner image

HTML & CSS
1

Hi All

I am developing a two column website with, hopefully, an image of 276px wide in the left column, the right column flexible and just containing text and a need to have a banner image going across the top of the page. I want the banner image to fill the width irrespective of the screen resolution.

Is there any way of doing this without the user having to scroll horizontally, something which I dislike although I see
it it sites belonging to major organisations and corporations.

Thanks

Justin

2

If you set the image as a background image on an empty element, and make sure the image is large enough to accommodate very wide screens, then you will see as much of it as there is space for and it will be clipped at the edge of the viewport or space available.

3

Thanks stevie D

So why is it that when I create a banner 800px wide and display it on a 800px * 600px resolution monitor the image
overlaps the side of the monitor?

Should one forget 800 * 600 now as sizes are moving on far above this?

Thanks

4

800px is the width of the viewport size and then you have browser chrome and scroll bars to content with so the actual usable size is always much smaller (about 760px).

Should one forget 800 * 600 now as sizes are moving on far above this?

Actually the impetus is the other way now because of the increase in mobile devices so you should design with no set width in mind (or an elastic layout)and let your layout adapt as required. For large images you should place them as backgrounds so that they don’t interfere with the page as Stevie mentioned although browsers are getting better these days at [URL=“http://www.peachpit.com/articles/article.aspx?p=1324981”]scaling foreground images.

5

Paul, as usual spreads wisdom. One must account for the fact that the “chrome” takes up some of the space in that 800px , also that many users don’t Max-out their browser window.

I wanted to add tho that THE DEFAULT WIDTH of any BLOCK LEVEL element ( DIVs, for example) is 100% of the available window. So I guess what I am saying is FORCING a WIDTH is where the issue begins.

I want the banner image to fill the width irrespective of the screen resolution.

Many times this is a simple visual illusion. Remember that if you widen an image w/o elarging it’s vertical dimension it will appear squat/distorted. It is best to rely on repeating patterns and points of focus.

the SIMPLEST and most rudimentary example would be if you had a DIV with a set BG color ( lets say pink, for October). you could also have a bg image 100px high and 900px wide which fades out to PINK on both ends in100px. Now if someone is seeing that page in a 1600px wide monitor it “feels” as if image extends all the way. You can make things more realist of course by wrapping elements ( tho CSS3 allows multiple bg images greatly reducing the need extra elements) and the use of AP images/elements as a point of focus.