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-color:FFFFFF;
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:top center;
margin-top: 610px;}
–>
</style>

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?

    Thanks

  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;
    text-align:center;
    }

    #Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    }

Leave a Reply