Background image is not displaying correctly

Posted on 2011-10-24
Medium Priority
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
  • 2
LVL 30

Expert Comment

ID: 37018463
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

ID: 37022007
ok, thanks- Unfortunately I don't have access to do that on that page.
LVL 45

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 37026066
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

ID: 37028257
great answer, thanks!

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

621 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