So I want to use three background images for the header, content area, and footer. I am just struggling to position them in the correct order. Should I be using the background-position or background size selectors? Or something else? I was assuming I could do all of this work in my body tag or do I need to use separate divs in or outside my wrapper?

My wrapper is always centered but, I wanted all three of bg images to repeat horizontally across the full screen of the browser for better aesthetics. My css is below.

/*************************
Styles
*************************/


body {
background-image:url('../img/index/subtlenet2.png'),
url('../img/index/paper_2.png'),
url('../img/index/low_contrast_linen.png');
}

#wrapper {
width: 850px;
margin: 10px auto;
}

nav {
}

footer {
bottom-margin:0;
width:100%;
text-align: center;
}

.content {
margin-top: 20px;
color: white;
}