Stretch image vertically either using javascript or Jquery

Question

Hey I'm new here and I would appreciate anyhelp as I have been banging my head against the wall for weeks now.

I am currently working on a Wordpress theme located at blog.honora.com. If you take a look you can see that there is an image that stops and then forms a white background. The image is located at http://blog.honora.com/wp-content/themes/honora%5Fblog/images/new%5Fslice%5Fbk.jpg. It is obviously repeating but for some reason it wants to stop and not go down to the footer. I've tried many things in the CSS. If I set the image to fixed it repeats to the bottom but it messes up when you make the browser smaller and move left to right. I need something that moves the same way the footer does.

I'm definitely missing something real simple. I can provide any code you need or if you need. I would appeciate any assistance you guys can provide.

Thanks in advance, -T

Answer 1

Hi,

You don't need javascript to apply a background, just use css. Create 2 major divs : site_content and footer. Tell site_content to "catch" everything what belongs to the website, except the footer, and set the footer you'd like.

Also, in site_content, use this : http://www.webtoolkit.info/css-clearfix.html It will allow you to have a div that extends automatically in the vertical way. Apply yout background to repeat on this div and it should work like a charm :)

Answer 2

It looks like you're using an image and stretching it to fit your background, just use CSS to set a background image... this should be the CSS for your body tag, then remove the image.

body {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) center top}
 font-size: 62.5%; /* Resets 1em to 10px */
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

But with adding this, it doesn't match up with the stretched images in your footer

---

Edit: Wow, I just looked though your page code...

• You really need to clean up your formatting ( I found lots of </div> with no opening <div>).
• Remove the tags that you are using for your background and footer.
• Remove your getH function.
• Now, to make the body image work with your footer, you'll need to use a that doesn't include your footer... here is an example:

Ok, I don't know why I can't add HTML as code, so here is a link

Then change your CSS to look like this:

#main-content {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/new_slice_bk.jpg) top center repeat-y;}
 font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
 font-size: 10px;
 color: #333;
 text-align: center;
 margin:0;
 padding:0; 
}

#footer {
 background: url(http://blog.honora.com/wp-content/themes/honora_blog/images/body_bg_about_4.jpg) bottom center repeat-x;}
 padding:0px;
 margin: 0 auto;    
 clear: both;
}

Answer 3

As yoda noted, you do not need javascript or jQuery for this. All you need is CSS. Make you sure have a block element (you could probably use the body element) that includes all your content except for the footer and apply a background property to the element with your image. You may need to modify your image since it is pretty wide. To make it repeat all the way down the page just add the "repeat-y" attribute.

It might look like this:

body{
    background: url('URL of image') repeat-y;
}