Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Voodoo Tech and Scripter's Den of Scriptniquity > Add an Auto-resizing Background Image
Mottie (MVP) 8/18/2009 11:42 PM EST : Add an Auto-resizing Background Image
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Add an auto-resizing background image

CSS Method

*NOTE* This only works on newer browsers that support CSS3 (so it won't work in IE8 and older).

Add the following to your custom css section (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab)
body {
  background: #000 url(my-background-image.jpg) center center fixed no-repeat;
 -moz-background-size: cover;
 background-size: cover;
}
Then change the file url in orange to target your background image. That's it!

JQuery Plugin Method

*NOTE* This only works for content that fits on a single page... you won't be able to scroll down 

This script allows you to add a background image that fills the entire browser window and adjusts automatically when you change the browser size. I set up an example over my my test-site 3 bank tab (bank, what bank?). The script uses a jQuery plugin called maxImage (check out the other demos) that does a few other things, but I'm only covering the background image in this post.

The Code
(HTML)
<img class="bgmaximage" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg" width="1000" height="750" />


(Javascript)
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquerymaximage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('img.bgmaximage').maxImage({
   isBackground: true,
   verticalAlign: 'top'
  });
});
</script>
Using this Script
  • Add the HTML anywhere on your page... of course you could use a different image for each tab of your site.

    • The image tag <img> you add should have the class "bgmaximage" added to it. This is needed so the script can find and adjust it to work as your background image.

    • The background image you choose needs to have a width and height set inside the image tag (in red). The image in the example is 1000 x 1333, but because of it's size it crops part of the image. So you might have to mess around with the image size until it suits you.

  • Add the script to your Banner or Footer HTML. You shouldn't have to change anything.
Updated (12/31/2010): Added CSS3 method
TopBottom

Eph (MVP) 8/19/2009 2:46 AM EST : RE: Add an Auto-resizing Background Image
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Tried this out, and my scroll bar dissapeared .

http://www.guildportal.com/Guild.aspx?GuildID=320043&TabID=2683200

html is in the donation box top right side.

Script is in the footer.
TopBottom

Mottie (MVP) 8/19/2009 10:28 AM EST : RE: Add an Auto-resizing Background Image
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hmmm I guess that could be a problem o.O

LOL Let me look into it.
TopBottom

Eph (MVP) 8/19/2009 1:52 PM EST : RE: Add an Auto-resizing Background Image
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Yeah, figured you would like to know, went to your test page, and noticed it wouldn't have a scroll bar anyway.

Another thing I noticed. I normally use a fixed image. The image that the code seems to add is not fixed, and it also does not tile, so when I got to the end of the image (using arrow keys) my normal background image took over.

Not sure if there is anything to be done about this issue, but I figured I would bring it up.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%