# Css using multiple background images

**URL:** <https://forum.kirupa.com/t/css-using-multiple-background-images/234650>\
**Category:** Uncategorized\
**Created:** [August 4, 2007, 9:11am UTC](https://forum.kirupa.com/t/css-using-multiple-background-images/234650 "2007-08-04T09:11:23Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [August 4, 2007, 9:11am UTC](https://forum.kirupa.com/t/css-using-multiple-background-images/234650/1 "2007-08-04T09:11:23Z")

</div>

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:

```auto

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/](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:  
 ![](http://www.arctosdesign.com/example1.jpg)

How I want it to be.  
 ![](http://www.arctosdesign.com/example.jpg)

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:

```auto

<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.:+)