I’m working on a responsive site with a total fixed container width of 1170px. Within this container, I’m doing span3 (my left sidebar) and span9 (the main article) for a 2 column layout. On the main article column (span9), I have a banner image that I want to fit the entire width of it. Here’s what I have so far: http://ogmda.com/test/menu.html
My question: At what specific width size should I make the banner image? FireBug shows me that the width of .span9 is “870px”. Does that mean I should make my banner image 870px or should I create a higher resolution image beyond that? The site won’t expand past this point, so I don’t see why I’d need to do that.
I’m not quite sure I understand the question as you should make the banner image whatever size you need it to fit? Unless you are talking about banner ads and then you are usually stuck to the sizes they give you.
If it’s just your own logo or banner then make it fit the widest column for your fixed width layout but of course you will have to compensate for the media query changes and supply different sizes of the banner for the smaller widths. I may have misunderstood the question though as I think you may have meant something else?
I’m using the bootstrap framework and I think I answered my own question. So, disregard that. However, since the banner image is not really part of the content (it’s more of a design element), I’m thikning of making it a background image within that div rather than a normal image. Bootstrap scales down the img for various breakpoints, but it doesn’t do this if you make it a background image! So, should I just not worry about being semantic here and just let the banner be a regular img div instead of a background image?
It depends on what the function of the banner is. If its a heading or site name or something similar then the image should go in the html. If it’s for decoration only then it should be a background image. If its a background image you can use background-size to make it scale smaller as required.