Topic: Image Header Tutorial

I have read every post I could find on adding a image header. None seem complete or either assume the user knows more than I do.  I would appreciate a step by step method for adding a image header. From the number of post on this topic it seems popular enough to warrant such a guide.  IMHO it should start with and include the following:
1. Image size how many pixels?  Height x Width Limits. What is necessary if anything to make the image auto adjust?
2. What do I save the file as? File name? Jpg, PNG, GIF etc...
3. Where do I upload the image to?
4. What modifications to I make to the required files?  What are the file names and where are they located?  How is this accomplished? Text Editor?
5. Are there any limits, do's or don'ts for image headers?
6.  Is css the only way to accomplish this or can it be added into the html?
7.  How to make the image header transparent so you can still see the heading and comments? 

Just a start....but a few questions that I have yet to find answers to in one place. If this exists please point me in the right direction. Thanks!

Re: Image Header Tutorial

1. Image size how many pixels?  Height x Width Limits. What is necessary if anything to make the image auto adjust?
the image size is up to you.

2. What do I save the file as? File name? Jpg, PNG, GIF etc...
you can same it whatever you want, use different formats for different qualities, size....

3. Where do I upload the image to?
normally img/ but you can upload it to where ever you want, as long as you set it on the code

4. What modifications to I make to the required files?  What are the file names and where are they located?  How is this accomplished? Text Editor?

If you are doing it the CSS way you edit style/imports/style_cs.css:
Or
If you are doing it the HTML way you edit include/template/Main.tpl

5. Are there any limits, do's or don'ts for image headers?
There isn't really limits, it is just what looks good and what doesnt. I'm sure you know what will look good and what wont. And you don't want them too big, so they take ages to load

6.  Is css the only way to accomplish this or can it be added into the html?

both.

Css :

 /* header logo */
.pun H1 
{
/* your logo and position */
background-image: url(../../img/yourstylename/logo.gif);
background-repeat: no-repeat;
background-position: left; /* you set your logo position here */
display: block;
height: 70px; /* logo height in here add width: size px if u need*/
}

HTML :

 <img src="LOCATION" width="" height="">

7.  How to make the image header transparent so you can still see the heading and comments?
GIF and PNG formats are transparent, if you save them in the correct way

(all this can be found on the punbb and punres forums with a bit of common sense)

hope this helped

Sorry. Unactive due to personal life.

Re: Image Header Tutorial

Thanks for your time, I'll work on finding "a bit of common sense" roll

Re: Image Header Tutorial

hope it helped

anytime

Sorry. Unactive due to personal life.