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

  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Set the image as the background of a <div>, give the <div> a centered CSS background-position and a width of whatever you like.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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

Code: [ Select ]
 
<style>
body {
     margin: 0px;
}
 
#myDiv {
     background:url(/path/to/img.jpg) no-repeat center;
     width: 100%;
     height: [specify this to same as image height]px;
     position: absolute;
     top: 0px;
     left: 0px;
}
</style>

[and then at top of body]
<div id="myDiv">&nbsp;</div>
  1.  
  2. <style>
  3. body {
  4.      margin: 0px;
  5. }
  6.  
  7. #myDiv {
  8.      background:url(/path/to/img.jpg) no-repeat center;
  9.      width: 100%;
  10.      height: [specify this to same as image height]px;
  11.      position: absolute;
  12.      top: 0px;
  13.      left: 0px;
  14. }
  15. </style>
  16. [and then at top of body]
  17. <div id="myDiv">&nbsp;</div>
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

provided the div is in the correct place in the page flow you don't really need the position, top, or left values.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

This is working. Thanks. I'll let you know the results soon!
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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?
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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...
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

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
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

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?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

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
Code: [ Select ]
<a class="header" href="someURL"></a>
and the CSS
Code: [ Select ]
a.header{
display:block;
background:url(/path/to/img.jpg) no-repeat center;
width: 100%;
height: [specify this to same as image height]px;
}
  1. a.header{
  2. display:block;
  3. background:url(/path/to/img.jpg) no-repeat center;
  4. width: 100%;
  5. height: [specify this to same as image height]px;
  6. }


the "display:block" basically turns your anchor tag into an object that will change the flow order just like the div you have currently.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Thanks Graphixboy. Learn something new every day. Always more than one way to skin a cat.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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. :)
Attachments:
banner.html.zip

(540 Bytes) Downloaded 331 times

Example

  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

Both of your (graphixboy and joebert) solutions above work, but I think I'll go with graphixboy's because it doesn't require typing in content that has to be hidden. Maybe on some obscure browser that text will show up and it would be better if it didn't. Or, maybe, having that text there is better for SEO, so who knows.

If any of you know why one is better than the other, please let me know.

(P.S. I'm amazed at how helpful you all are. Thank you so much. These forums, or rather the people in the forums, are great.)
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

Check it out, it works in both IE and Firefox:
http://xona.com/

(Next I should split the banner in to and link the bottom part to the game page.)
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Looks good. Joebert's example would actually be useful for mobile users (text would show for them), but doesn't look like that's really a concern judging by the large header. :) Because of that use, I don't think it would count against SEO.

Just for grins, you could also swap the text for an '&nbsp;' and not have to worry about text showing when you have a container that needs something, just anything, inside of it (collapsing divs is a perfect example). However, I do like to try and avoid '!important' when possible as you never know what changes are coming down the pipe to CSS.

Then again, joebert usually knows something I don't. :)
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

Thanks. You guys are great. I'm not a superb web developer, I just want a website that attracts attention to my game, but is really nothing more than a tech blog. I think the banner alone accomplishes this without needing to redesign the site all "game-like". I don't think people expect too much from indie game dev websites (hopefully).

Another idea I had, was using a youtube video (resized smaller) as a part of the header of the site. Is that a bad idea? I'll tell you why it's a good idea: It increases views of the video significantly, and also (if the video shows game play right off the bat) showcases the game immediately for what it is.

If you scroll to the bottom of http://xona.com/ (or visit http://matthewdoucette.com/) you can still see the banner where I did this before. What do you think of that idea?
  • jacksmith
  • Novice
  • Novice
  • jacksmith
  • Posts: 16
  • Loc: London

Post 3+ Months Ago

I dont think it is possible as you want the website to not introduce a left-right scroll bar.
  • Matthew
  • Proficient
  • Proficient
  • User avatar
  • Posts: 266
  • Loc: Canada

Post 3+ Months Ago

jacksmith wrote:
I dont think it is possible as you want the website to not introduce a left-right scroll bar.

I meant only due to the 1280px wide header graphic, and it's working!
  • SomeGuyFromCali
  • Born
  • Born
  • SomeGuyFromCali
  • Posts: 1

Post 3+ Months Ago

UPSGuy: I didn't need to have clickability for my header, I just needed to know how to center a logo 1600 px wide on a 1024 px screen in CSS. Thanks a million for posting your solution, it worked great for me.
  • spacex
  • Born
  • Born
  • spacex
  • Posts: 1

Post 3+ Months Ago

I'm trying to do the same as the OP but with a javascript fading slideshow.

Please see website: .archivedepartment.


Does anyone know if its possible?

Thanks,
spacex

Post Information

  • Total Posts in this topic: 23 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.