1

My goal is to add a full-size background image to my Genesis child theme that cycles through four or five images on the home page, and is a static image corresponding to each subsequent page (or child thereof).

You can see the progress here: http://devel.hodgsonco.com

The cycling part works, which is nice, but the full-screen part doesn't. I'd like to have the image matched to the size of the browser so that the sides of the image get cut off but the height is exact. I don't want the image to be distorted.

Here's how I got the cycling part to work. I followed a tutorial here: http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

There's this in my functions.php:

add_action('genesis_before_header', 'add_bg_images_html');
function add_bg_images_html () {
  echo '<!-- jQuery handles to place the header background images -->
  <div id="headerimgs">
  <div id="headerimg1" class="headerimg"></div>
  <div id="headerimg2" class="headerimg"></div>
  </div>';
}

And then a bit of this in my CSS:

.headerimg { 
background-position: center top; 
background-repeat: no-repeat; 
/* Set rules to fill background */
min-height: 100%;
/*  min-width: 100%; */
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
width: 100%; 
height:auto; 
position:absolute;
}

And then there's a javascript file that does some magic here:

http://devel.hodgsonco.com/wp-content/themes/ionclub/js/script.js?ver=3.3.2

I commented out a lot of stuff from that script because I didn't need any of the animation controls it had in it.

So, my problem is that the images are nice and big (1680px wide by some other largeish number tall), but in smaller windows all you see is the top of the image.

So, what am I doing wrong, or not doing that I should be? Is there a way to make this look pretty and fancy?

Thanks in advance!

Jim Hodgson
  • 125
  • 2
  • 6

3 Answers3

1

The thing to use is the CSS3 property "background-size". You can read up on it on W3 Schools. If you include Modernizr, you can also provide fallback support.

Anyway, just set up your background as follows:

background-size:cover;

And that's all there is to it! "Cover" sets the background image to scale to fill the element's area without distorting the aspect ratio.

AdamJ
  • 184
  • 1
  • 1
  • 11
0

You may want to have a look at the answer to this question. Looks like it's possible to do what you want by setting the image to have

position:absolute;
z-index:-1;
height:100%;
overflow:hidden;
Community
  • 1
  • 1
Anthony Atkinson
  • 3,101
  • 3
  • 20
  • 22
0

If you want it to be scalable without using CSS3, you can't use the background-image property; you have to use actual images and scale them to the width or height (in your case height) of a div that spans the size of the window.

Stretch and scale CSS background

Community
  • 1
  • 1
c..
  • 1,044
  • 1
  • 9
  • 23