How to Center and non tile a background image RRS feed

  • Question

  • I have an image that I want to use as a page background but I do not want it to tile and I do want it to be centered on the page taking up as much of the background a possible. I used

    <STYLE TYPE="text/css">
    BODY { background-image: url(yourimage.jpg) }
    BODY { background-repeat: no-repeat }
    BODY { background-position: center }

    It place the image on the background without tiling it but it centered it incorrectly. I only had have the image showing but it was missing the top half of the image. I am testing in IE9.

    If I take the center off it places the full image n the background but positioned to the left of the page with a lot of white on the right.

    So my question is with so many wide monitors today how do I get an image to fill the background without tiling itself?


    Sunday, June 12, 2011 6:19 PM

All replies

  • You don't. The image will take up an amount of space equal to its pixel resolution (Web backgrounds are not expandable Windows wallpapers), and that's a good thing. As you noted, there is a bewilderingly large range of monitor sizes in the wild these days, and any image which resized to try to fit them all (even presuming that everyone browsed full-screen, which they don't), would be badly, and randomly (depending upon the user's monitor and browsing preferences), distorted by non-proportional size changes.

    As for your centering issue, it is literally impossible to determine what the problem might be without a link to the page and its markup and CSS (see Forum FAQ and Guidelines - Start Here). You might try using both parameters to the background-position property explicitly and see if that has any effect. So, background-position:center center; I don't know if that will actually accomplish anything different from what you are seeing now, but without access to the markup and CSS, there's little else to suggest.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, June 12, 2011 6:56 PM
  • Here are two pages I put up

     If you wanted to use this picture as a page background what would you suggest the best way to do it?



    Sunday, June 12, 2011 9:01 PM
  • Personally, if I were going to use this image, I would probably go with

    body {
       background-image: url("images/BeautifulBackgroundScene.jpg")
       background-position:top center;

    That will center the image at the top of the page behind your (presumably) centered main content area. However, I should note one thing that you are failing to take into consideration, something not uncommon among novice developers. It's called a "background" for a reason. It should not be the part of the page which draws your visitors' attention. That role should be reserved for your foreground—your content, your message, your products, if any. The more attractive your background is, the more distracting it will be from your primary purpose for having visitors come there to begin with.

    Add to that the fact that the central portion of that background, the part which makes it so evocative, will be hidden by your content section, and you might want to consider whether this is something you want to concern yourself with after all. Just a thought...


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, June 12, 2011 9:27 PM
  • Well, you have a 1200 px wide picture there, which is far wider than anyone makes their sites. Look around the web. Look at the professional sites (CNN, MSNBC, etc.) they are all set at about 960 to 980 px wide. That way, they'll just fit on an old 17" CRT and any netbook with a little room for the browser's chrome and a bit of background color. If you make your site 1200 px wide, those people will have to scroll sideways, and people hate that.

    On larger monitors, 960 - 980 will center and display against the body color. And it's a good width for readability; the lines of text aren't too long if you use a 2 or 3 column layout.

    The other problem with that image (even the smaller test3 one) is that it's 400 px high. Add to that the browser's chrome on the top (toolbars, menus,, etc., and you have wasted half the height of the visitor's monitor, relegating your copy--the most important part of your site--to "below the fold". Bad advertising.

    If you are going to use that picture, narrow it to a reasonable size and make the body color dark (greenish-brown to match the edges of the image). It looks odd slapped against plain white; you need to fool the eye into not noticing the edges.

    You could use the picture (or a shorter version of it--I'd lose some of the road at the bottom) to overlay with logo, address, phone, and menu. But, as Scott said, you don't want people daydreaming about fall afternoons with crepuscular rays dancing through the leaves. You want their attention on your product. I'd at least use a photo (from one of the online services) that included massage.

    The bird, the bee, the running child are all the same to the sliding glass door. Dimitri Martin
    Sunday, June 12, 2011 10:32 PM