Support » Fixing WordPress » Fix background images to header and footer – multiple images?

  • I have a site where I want the background image to fade from colour 1 to colour 2 at the top, and then from colour 2 back to colour 1 at the bottom.

    I thought the best way to do this might be with a background image I created in photoshop, but the pages are going to be of different lengths. So an image that would look good for one page, wouldn’t work that well for another longer (or shorter) page.

    I then thought a better idea would be to set the background colour of the body to colour 2, and have an image at the top that fades from 1 to 2, and an image that would be at the bottom fading from 2 to 1. However, it seems that you can’t have more than one background image (unless you’re using CSS3 which isn’t great with all browsers).

    Is there any way to either:
    1) Apply a background image the can be fixed at the top and the bottom and will stretch/shrink in the middle to fit the different sized pages.
    2) Add one background image to the top of the page, and a separate one to the bottom of the page, either overlapping in the middle or leaving a space that can be filled with a background colour.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • just an idea, what if you don’t use background images, but header and footer images which extend into the content area? I wonder if they’d stay behind the content? I think there’s css for that but I can’t remember what it is. Z-index?

    Otherwise the usual way to handle this is with an image cropped in such a way that it can repeat seamlessly as the page gets longer. Although it sounds like your idea may not work that way.

    how does this question relate to wordpress?

    can you post a link to your site to illustrate your problem?

    You can use one stylesheet for older browsers (that don’t support CSS3) with plain background which will probaly help these customers load the page faster anyway – and one for modern browsers…I doubt those using the older browsers would care as they have not seen CSS3 pages anyway.

    Thread Starter mattyk1972

    (@mattyk1972)

    Thanks for the suggestions. The z.index one looks as though it might be the mot likely but I’m still not sure how to implement it in WordPress.

    I found this article that outlines the steps:
    http://cherny.com/webdev/11/dual-background-images

    I’m happy enough making the CSS changes, especially as the theme I’m using has a custom CSS section, but to which file do I add the the html bit that creates the extra div?

    Not sure if it’s important but my site is tbmystery.k-toomarketing.co.uk

    Thanks for the help.

    If you are going to try the header and footer image idea, I assume you’d put the code in those files (header.php/footer.php). However your theme may already be using background images there, so you’d have to disable that, or mod the existing php and css image code.

    Sorry I can’t be a better help, I’m interested in what you’re doing but have limited expereince here. I don’t know that header or footer images can extend under the content. I imagine it might work if you made overflow visible and push it to the back with a negative z index..?

    If it worked, you’d have to have a minimum page height to prevent the images from overlapping in the center on short pages.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fix background images to header and footer – multiple images?’ is closed to new replies.