Align div content relative to background?

[MohtasaUnique]

(Sorry about the annoying format, makes the text easier to see next to all the screenshots)
Ok so I'm a HUGE noob when it comes to web dev, I've only just started learning. I've got the following code:​

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
    min-height: 100%
}
body {
    background-color: #ffffff;
    background-image: url(banner.png), url(footer.png), url(filler.png);
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}
</style>
</head>

<body>
<style>
div.content {
	width:700px;
	padding:10px;
	border:2px solid #004688;
	margin:auto;
	margin-top:400px;
	margin-bottom: 135px;
}
</style>
<div class="content">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div>
</body>
</html>

And here is the result:

Looks good, everything is aligned properly. But then when the page is resized to a size smaller than the div container, the div and the background fall out of alignment. Here's what it looks like:

.......

How do I make it so that the div stays aligned relative to the background image? OR How do I make the background image stop at the left-most edge when resizing, so it stays center until the window is too small for it? The background image ends at the very end of the shadow graphic, the white in the background is just a background-color property.​

 

[SuF]

The div has to be um. relative. Hold on.

 

[SuF]

margin-left:auto;
margin-right:auto;

will work but it will be as wide as the page.

 

[SuF]

margin-left:auto;
margin-right:auto;

will work but it will be as wide as the page.

Or wait.

margin-left:auto;
margin-right:auto;
width: 700;

 

[SuF]

try display: block;

for the text no idea what it does

but yea make a divcenter that shit background the image then put your content div in that div

 

[MohtasaUnique]

margin-left:auto;
margin-right:auto;

will work but it will be as wide as the page.

as said on FB, that's what it is currently (in case anyone else has input to give me too)

try display: block;

for the text no idea what it does

but yea make a divcenter that shit background the image then put your content div in that div

I'll try this after work, all attempts thusfar to put the background inside a div has fallen flat, but it's probably because I'm just doing it wrong

 

[SuF]

Put it within a centered div that contains the image.