Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Add an Auto-resizing Background Image
Mottie (SuperAdmin) 8/18/2009 11:39 PM EST : Add an Auto-resizing Background Image
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Add an auto-resizing background image

GuildPortal admin site link to original post

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
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/19/2011 11:50 AM EST : RE: Add an Auto-resizing Background Image
Dethmaul
Posts: 987

0
Like

0
Dislike

Mottie,

I figured I haven't bothered you in about a we, so I was due. wave

Anyway, I was wondering if it would be possible to combine this script with the random background script. I want to have a non-scrolling, random background on my site.
TopBottom

Mottie (SuperAdmin) 12/19/2011 4:28 PM EST : RE: Add an Auto-resizing Background Image
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Shouldn't you be playing SWTOR? LOL

Well, this post is about stretching the background image, and this post is more along the lines of what you want... I think.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Dethmaul (Member) 12/20/2011 11:10 AM EST : RE: Add an Auto-resizing Background Image
Dethmaul
Posts: 987

0
Like

0
Dislike

Mottie said:
Shouldn't you be playing SWTOR? LOL

Well, this post is about stretching the background image, and this post is more along the lines of what you want... I think.


I DO work you know.

I tried that script in that other post. IT works.... kinda...

I noticed when I used that script if I changed the BG location to top, center or bottom, it did exactly that... surprise, I know. Top put the BG at the top of the page, and when you scrolled the page, the BG would scroll up with the rest of the page.

Center put it in the center of the page, and it would be static there and scroll with the page as well.

What I want it to have my background fill the screen behind my widgets, and be static, not moving when I scroll up or down the page. I would also love to have it change randomly when I change pages or refresh the page.

I love what my site does currently, I just want random images with it.
TopBottom

Mottie (SuperAdmin) 12/20/2011 4:22 PM EST : RE: Add an Auto-resizing Background Image
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

In the background options, add "fixed" to prevent scrolling:
bkgdOptions = '#000000 center top no-repeat fixed';
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%