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,
Matt

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:#000000;
}

body{
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.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    min-width:762px;
}
body {
    background:#000 url(white.jpg) repeat-y 50% 0;
}
#outer {
    width:760px;
    margin:auto;
    border:1px solid #fff;
    color:#fff;
}
</style>
</head>
<body>
<div id="outer">
    <h1>Content goes here</h1>
</div>
</body>
</html>


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.