CSS Center Background Image

How to center background images on web page.

Question: How do I center the backgournd image on my web page so then when I change the window size, the image stays center under the content?

Answer: Try using CSS (Cascading Style Sheets) to manage your background images. The key is the “background-position:top center;”. This will do the trick. See below for an example.

<style type=”text/css”>
body{ font-size:x-small;
background-position:top center;
margin-top: 610px;}

Note: Make sure to change the above “bg.jpg” to your background image path.

You may also like...

4 Responses

  1. My image still moves when the window is made smaller than the outer wrapper, any ideas? thanks

  2. Frankey says:

    When the width gets smaller the bg image will move because it is centered, so use top left.

  3. kevin says:

    Is it possible to center everything on the site. with the code from above the image is perfectly centered but my text remains not centered. Any ideas?


  4. admin says:

    Try this. Put all of your content in a main div and call it “Content”. For exampl:

    bla bla

    And add the following to your CSS (be sure to change the width to your desired size):

    body {
    margin:50px 0px; padding:0px;

    #Content {
    margin:0px auto;

Leave a Reply