How do I get header image to fit?

[katex]

I'm confused. My header image is 851px by 351px.
But there's a space (border) below it and to the left of it.
How do I get it to fit exactly? I've set "border" to "0". I've also set the image to "center" (yet it is still right-aligned).
Is it possible to change the width of the forum? And if so, how/where is this done?
Basically I just want my header image to fit neatly at the top, without borders or spaces.
Any help would be appreciated.

ireland2spain.boards.net/

[katex]

oops - That should be 851 by 315. But I've just noticed that the 851px image I uploaded is being reduced to 830px when it displays on my forum page. Why?

[Brian]

Hi, katex.

Add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet on that theme.

#banner { display: block; padding: 0px; }

[CF74]

When simply using the default theme, what size do you recommend the image for the banner to be in using px?

[Brian]

Jul 21, 2013 23:16:26 GMT -8 CF74 said:

When simply using the default theme, what size do you recommend the image for the banner to be in using px?

The default theme uses a percentage width, so no banner would be perfectly applicable as the width of the forum is dependent on the width of your browser window when using said width.

[CF74]

Jul 23, 2013 10:43:45 GMT -8 Brian said:

Jul 21, 2013 23:16:26 GMT -8 CF74 said:

When simply using the default theme, what size do you recommend the image for the banner to be in using px?

The default theme uses a percentage width, so no banner would be perfectly applicable as the width of the forum is dependent on the width of your browser window when using said width.

Ok so is there a percentage code to make a reasonably proportioned banner image fit snugly?

[CF74]

<img src='http://URL-of-IMG' alt='' width='100%' border='0' />
Back in the day I used this code on another forum format to fit the banner snugly without gaps.

Is there any way to tweak this code to meet Proboards format?

[Brian]

Not unless the banner massively exceeds any possible width of the forum. If you were to scale a banner up to over 100% of its size, it would become blurry and unattractive.

The ideal solution would be to set your forum to a fixed width, then use a banner that's the exact width that you set your forum to.

[CF74]

Basically I'm trying to get the banner to fill the header space and be compatible with all browsers. I have the forum set to 90% width, I've centered the banner but it has gaps on both sides. Some older operating systems cut the banner off about 15% or so on the right side. How do you scale the banner by percentage and make it compatible with all browsers?

cowboys-forever.proboards.com/forum

[Boy_Wonder]

One way of doing this would be to make it so one edge is roughly faded back - tell the image to sit flush against the left edge and then use a gradient behind it so that the gradient will fill the rest of the size yet give the 'look' of a seamlessly scaling banner.

[Brian]

I've told you twice now that the space on the sides of the banner vary depending on screen size because you're using a percentage width. It's not going to fill the entirety of the header space unless it's a massive image that gets scaled down at smaller widths.

[CF74]

Ok maybe we aren't understanding each other. How do I adjust the banner percentage so that's it's compatible with all browsers and all operating systems?

When I use Google Chrome via Windows 7 the Banner is centered and looks pretty good (With only small gaps on both sides) but when I use Google Chrome via Windows XP Pro (Or an Iphone) the banner gets cut off on the right side about 15% or so.

[Brian]

It's already compatible with every browser that we support.

Your forum is shrinking to a size lower than that of the image, so it's cutting off. That's how it works when you've set the width to a percentage and the browser window is too small or too zoomed in.

The iPhone's screen size is only 640px wide. I'm not sure what your screen resolution is on your Windows XP computer, but if the banner is cutting off it means that it must be small.

[CF74]

Ok I appreciate your response and your help. Not trying to sound argumentative but there should be a code that would make it compatible automatically for all browsers, all operating systems, and all cell phones.

For InvisionFree Forums that code would be:


<img src='http://URL-of-IMG' alt='' width='100%' border='0' />

I realize we have different formatting here and in many respects it's quite better and way more advanced or so it seems. Perhaps a coding guru might know the hidden answer. Either way I'm thankful for your response.

[Brian]

That is the code that's being used. Both screenshots show that the image is using the basic <img> tag (highlighted in the forum's source code below), something that's been standardized in web browsers well before ProBoards' time.

Here's Support at 90% width:


Now here's Support at 90% width in a smaller window, closer in resolution to the size of an iPhone's supported resolution.


The issue has nothing to do with compatibility. It has to do with the fact that you're placing the image in a container that's smaller than the image because you're using a percentage width, which has a variable size depending on the screen size of the device you're currently on. The container becomes a smaller width than your image on a smaller screen, thus cutting it off. A fixed forum width that matches the width of your banner image will not present this problem.

That's all there is to it.