Layered backgrounds to twenty thirteen

Hi,

I’m trying to modify a child-theme of twenty thirteen in the following way :

1) I would like to add a background image to the whole site (an image running along the left margin from top of page (including title and header) through the footer.

2) I would *also* like to add secondary background images (or alternatively, a solid colour) to the nav bar and footer area.

3) I have figured out how to add background images by adding background-image: image.jpg to the theme’s style.css .site {background-image: background.jpg; }, .navbar {background-image: navbar.jpg; } and .site-footer{background-image: footer.jpg; }.

4) Here is the problem, for ensuring proper layout, I want the background.jpg (i.e. pagewide image in .style ) to be on TOP of the navbar and footer images, but everything I’ve tried puts the .style background-image behind everything else.

How can I modify style.css in twenty thirteen such that I can have a footer and nav-bar image (or solid colour) that is BEHIND the background-image in .site?

Sorry if this is trivial, not really into css coding (yet at least ?? )

Thanks!