1

I'm trying to figure out how to fill a browser window with a background image and have the image scale if the user adjusts the browser window screen.

Additionally I'd like to have the background image rotate among 3 to 5 different images.

An example of what I'm after can be seen here:

http://elegantthemes.com/preview/InStyle/

CalvT
  • 3,123
  • 6
  • 37
  • 54
Akil
  • 41
  • 1
  • 6
  • I'm not using wordpress, and as such I can't use the theme. I wan't to create my own site with the same effect. Unless I'm misunderstanding what you're saying? – Akil Mar 30 '11 at 23:19

2 Answers2

2

The concept of changing backgrounds is simple. Here's a quick example i did changing backgrounds by changing classes of body. 

var bg = ['img3', 'img1', 'img2'];
$.each(bg, function(index, ui) {
    setTimeout(function() {
        $('body').removeAttr('class').addClass(ui);
    }, 2000 * index)
});

check working example at http://jsfiddle.net/ewsQ7/

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • How would I go about getting the 'fade' effect using your code above? – Akil Mar 31 '11 at 01:55
  • Hmmm.... Ideally, I'd like to duplicate what the guys did at the sample site above. Your solution comes VERY close, except it swishes instantly as opposed to a fade transition..... Hmmmm – Akil Mar 31 '11 at 12:13
0

They are using jquery to do a cross fade between the images and text. Check out line 27

http://elegantthemes.com/preview/InStyle/wp-content/themes/InStyle/js/custom.js

I'm not going to cut and paste in the js code for this because it's a paid theme for word press. If you don't want to write it all yourself I suggest buying the theme as it does exactly what you want.

http://www.wpthemesnews.com/theme-releases/instyle-a-premium-wp-theme-from-elegantthemes/

SavoryBytes
  • 35,571
  • 4
  • 52
  • 61
  • Thanks. I'm a bit (or a LOT of a noob), so please bare with me. I'm not using wordpress, as such I can purchase the theme and use it (or if I can still use it despite not using wordpress I'll gladly purchase it and use it). so is there a way to get the same effect, (i.e. fille the background with an image, and cycle through?) – Akil Mar 30 '11 at 23:26