Css using multiple background images

1

I am making a blog in wordpress and I am busy making a template aswell as going through the lynda css:for Designers videos.
now what I have done is this:


html {
    background: #ffffff url('images/bg.gif') repeat; <---- this is the stripy background
}

body {
    margin: 0;
    padding: 0;
    background: url('images/bg_gradient.png') repeat-x; <--- this is the gradient at the top
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666
}

.main {
    width: 762px;
    margin: 0 auto;    
    background: url('images/main_bg.png') repeat-y fixed top; <--- white with shadows forms main body
}

which is the backround image for the main part of the page (the white space with gradients on either side if you look at the page: http://www.arctosdesign.com/blog/ ) but what I want to do now is add another image that comes out of the left side of the page.
Example of what I mean:
As it is now:

How I want it to be.

the water effect is a different png that I want to go about the background layer.

I have picked up from watching the videos from lynda that it could be done using something like:


<div id="what ever"><img src=""></div>

And then creating the positioning using z-index ect in the style table under #div.whatever or somthing along those lines. My point is that I could probally do it that way if I was using a layout I made from scratch and not apart of wordpress. Because I dont really understand how the whole word press works atm Im just trying to figure out the seyle sheet part never mind the actual .html page. so if I was to use the <div> function where would I add that? or eles how eles could I acheive what I am wanting?
sorry this is long winded but Im eager to find out as I am enjoying css I have just hit a snag and am really keen to understand.
cheers thanx alot would really appriciate the help.:+)