(24 votes, average: 4.46 out of 5)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.
My image still moves when the window is made smaller than the outer wrapper, any ideas? thanks
When the width gets smaller the bg image will move because it is centered, so use top left.
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
Try this. Put all of your content in a main div and call it “Content”. For exampl:
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;
}