Hello, I'm having an issue with two graphics on my site - the logo banner and the signup banner. Basically, the graphic does not display correctly on all resolutions and needs to be made fluid. Apparently if you split it into three images (left,right,background) you can make a fluid banner for vBulletin. I don't really care how it's done as long as it's fixed somehow. You can see the issue by going here: http://www.webconfs.com/web-page-screen-resolution.php And entering this: http://cashcampus.co.uk/content.php You need to be a licensed user to view the thread on vBulletin.org so I created a quick video: http://www.screencast.com/t/N2I1NjYw Here's some info I found on making fluid banners: To do this just add some lines to your CSS and then call it out in the template you want it to display. Example: for a 3 part image in the CSS add #headerFill{ background-image: url(your/path/to image/here.gif); background-repeat: repeat-x; height: 120px; width: 100%; margin-right: auto; margin-left: auto; } #headerL{ background-image: url(your/path/to image/here.gif); height: 120px; background-repeat: no-repeat; width: 468px; float: left; margin-left: -20px; } #headerR { background-image: url(your/path/to image/here.gif); background-repeat: no-repeat; height: 120px; width: 175px; float: right; margin-right: -20px; } You can name it however you like, I used headerFill, headerR, and headerL. Be sure to put the correct image height and width in. THe margin-right and left is to align the edges to your forum width...you may need to adjust it or remove it. Then in your header template add the following: lt;div id="headerFill"gt;lt;div id="headerL"gt;lt;/divgt;lt;div id="headerR"gt;lt;/divgt;lt;/divgt; You should now have a fluid banner

This entry was posted on Thursday, November 26th, 2009 at 2:10 pm and is filed under CMS, CSS, Graphic Design, Logo Design, Projects, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.