Background Image Question

I want to have a “black” background, w/ a “white” foreground. I have used this code:

	body { background-color: #000000; background-image:url('white.jpg'); 
			background-repeat:repeat-y; background-position:center}

Now my question is: How do I control the width of the image and also, w/o being forced to use a “center” tag for all text, how do I ensure that all text remains w/in the confines of the image?

By image you mean the background-image? right?
You cannot control the image’s width by css as far as I know because it is a background image. Unless you edit the image in a editor and then put it as no-repeat it will always be 100% width.

as for the text, you can center it by using the following css code.

#yourdiv {
text-align: center;

Hope this helps,

So if I wanted to control a background image, I need to use inline code… Would I call the image at the beginning of the body element before anything else? Or say if I had a left, center, right… I would call the image when I would call my center?

html {

background:#FFFFFF url("white.jpg") repeat-y scroll 0 0;
min-width: 500px;
max-width: 500px;
margin: 0 auto;

Moved to CSS Forum.

I think you need to show an example of what you are trying to do so that we can give more specific answers :slight_smile:

If you are wanting to repeat a graphic down the centre of the page at a fixed width (say 760px) then to match the text in the page to that image you would need to create a container on the page that is 760px wide and has auto margins to centre it.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
body {
    background:#000 url(white.jpg) repeat-y 50% 0;
#outer {
    border:1px solid #fff;
<div id="outer">
    <h1>Content goes here</h1>

You could set a width on the body to match the image but that throws up lost of bugs in older browsers so is best avoided for the time being.