How To Expand Custom Image Header
We hear it many times…
“How can I make my header image expandable to screen width?”
This tutorial will help you accomplish this task.
Requirements:
- A bit of html knowledge;
- photo editor;
- and, photo editing.
Let’s Get Started!
Let’s start with a 780px header image … you can use the example image below…
Then Crop the leftside (your logo part):
And save it as head_left.gif
Second crop the right side of the header image as shown below:
And save as head_right.gif
Next select background image -just 1 or 2px width like shown below:
Crop the selected part and save it as headbg.gif:
Now load all the three images to the misc folder of images…
Next goto admincp> styles&templates> style manager> all style options>
scroll down to header
Delete the existing code complete and insert the follow there:
<!-- logo --> <a name="top"></a> <center> <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="background-image:url($stylevar[imgdir_misc]/headbg.gif)"> <tr> <td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left.gif" border="0" alt=""/></a></td> <td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right.jpg" alt="" /></td> </tr> </table> </center> <!-- /logo --> <!-- content table --> $spacer_open $_phpinclude_output
Updated the code above and just change the gif/jpg name you are using…