how to center a wider-than-browser banner graphic?

Can I center a banner graphic, that's wider than the browser, without expanding the width of my website?

The banner is 1280 pixels wide. I want it centered even if the visitor's resolution is 1024 or 800 pixels wide, plus I want the website to not introduce a left-right scroll bar.

Is this possible?

You have an example up of what you're looking at? I don't understand what you mean by centering it up if it's wider than the targer resolution width?

Set the image as the background of a <div>, give the <div> a centered CSS background-position and a width of whatever you like.

I don't have an example. But I want a banner graphic that's really wide (1280p) that stays centered as you scale the browser larger and smaller. What happens now is it stays centered when the browser is wider than the graphic, but it left-aligns when the browser is smaller than the graphic (as well as introduces the left-right scroll bar, which means the website is forced to be 1280 pixels wide).

I hope that explains it.

I don't have an example running, I just know this is how it works from squishing my own website: http://dualityzf.com/ Imagine if that center logo graphic was supposed to stay centered when I squish the website's width very small. That's a perfect example of what I want.

joebert's got the right suggestion for you then. Maybe something like this...

provided the div is in the correct place in the page flow you don't really need the position, top, or left values.

This is working. Thanks. I'll let you know the results soon!

This works great. I'll show you the result soon.

How would I make the image (the div) clickable? Wrapping it with an "a href" makes it clickable, but the mouse cursor does not change when it hovers over. Is there a better way to do this?

Ok, here's the result:
http://xona.com/

The "XONA GAMES" banner at the top, with the eight fighters, should fill a 1280p wide browser, and stay centered with both a larger and smaller sized browse... and it works!

Next, I just want to make it clickable where you can see the mouse cursor change on the mouseover.

Turns out wrapping that div with an "a href" works in IE 8.0 but not in Firefox, which simply links that non-breaking space, not the whole div. If you know of an elegant solution to making that div clickable, let me know! Thanks...

put this in your css file

#bannerTop span {
position: absolute;
width: 100%;
height: 242px;
}

Then in your html in you bannerTop div... add

<a href="addalinkhere.com"><span></span></a>

There might be an easier way, but it works for me

Thanks for the suggestion, I'll try it...

What's the difference between div and span? How should I use one and another? I know they can be used the same way but they are meant for different things. div is for small things and span for big things? I just read up on it and it said span also includes paragraph formatting of its own, where span does not. So it seems to me that div would be used for large block of html code and span for small peice of html, like even formatting a single word in a sentence. Am I on the right track?

well the difference in this case is that your allowed to wrap a span tag with an anchor tag to make it a link. Most browsers don't like it if you try to enclose container elements like a div inside an anchor (like you discovered).

However I should point out that you don't really need the span tags to make the whole thing click able.

You can essentially turn your entire header div into an anchor tag with a little bit of css trickery.
The HTML and the CSS

the "display:block" basically turns your anchor tag into an object that will change the flow order just like the div you have currently.

Thanks Graphixboy. Learn something new every day. Always more than one way to skin a cat.

The method in the example I attached has been working well for me in browsers, screen readers, and search engines for quite some time now.

I know I suggested a <div> earlier, but that was under the assumption that this was a generic function-less banner and not a header.