Background image is not displaying correctly

Posted on 2011-10-24
Last Modified: 2012-05-12
http:/ /secure [dot] funeral home webhosting [dot] com [slash] WHI [slash] about [slash] ourteam [dot] php

On the page I've listed above, the background image is not at the top of the page as is is on the home page. (It shows the bottom of the image at the top of the page). I'm not sure what the difference is on the pages that's forcing the image down here. I'm viewing it on FF 3.6. In IE8 and chrome, it seems to correct itself (on page refresh, it shows lower and then moves up).
Question by:mel200
    LVL 30

    Expert Comment

    Try adding the styles to CSS instead of inline:

    body {background: url("/images/headers/forest-large2.jpg") no-repeat fixed center center transparent;    min-height: 100%;
        position: relative;}

    Open in new window


    Author Comment

    ok, thanks- Unfortunately I don't have access to do that on that page.
    LVL 42

    Accepted Solution

    Couple of things - your background image is positioned with center center, so it is trying to align it vertically centred. If each page is a different length (i.e. one has more copy than the other) then the vertical align is not going to match on each page. Your image is 1724px deep. If your page is less than this, it will cut of the top and bottom, which is what's happening on your page. You need to align it with center top, to anchor the top of the image to the top of the page.

    body { background-position: center top; }

    Also, your site seems to be in quirks mode because of an invalid DOCTYPE. Sort this out before you go any further, or your site will break !!

    Author Closing Comment

    great answer, thanks!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now