Multiple Background Image Work Around?

Cool Tips & Tricks	Help Communities:

<< Prev Topic | Next Topic >>

Cool Tips & Tricks ::: CSS ::: Multiple Background Image Work Around?

Topic: Multiple Background Image Work Around?

(?)

dtzy2bblnd

Registered User
ezSupporter
Posts: 2

Posted: 11/15/05 12:07 am
Multiple Background Image Work Around?

I know that right now there isn't a way to have multiple background images in CSS, as in more than one actual image as the background. Now, I have used multiple images in layouts, but can't seem to figure out how to do so on ezboard.

Is there a div or span that I need to use, a specially formatted code?

Here's the layout I'm working on in my test board: My Test Board

The background image I have has a bottom right mirrored image (minus the board name and logo) that goes with it to complete the illusion of the actual message board having two semi-transparent corners (top left, bottome right) encompassing the entire board. I want to attach the image on the bottom right, relative so that it scrolls with the board, exactly as I have coded the top left image.

The code is a mess right now, I'm in the process of putting more in, so don't grit your teeth too much! LOL

Thank you in advance!

chrish18

Registered User
ezSupporter
Posts: 2265

Posted: 11/15/05 10:54 am
Re: Multiple Background Image Work Around?

Well you can get that effect by layering some divs, so you would put this in box 3

 
<div id="wrapper">
<div id="board">

box 4

 
</div>
</div>

And then use css

 
<style type="text/css">
body, html {
   margin: 0px;
   padding: 0px;
}

body {
   background-image: url(bottomcorner.gif);
   background-repeat: no-repeat;
   background-position: bottom right;
}

div#wrapper {
   width: 100%;
   margin: 0px;
   padding: 0px;
   background-image: url(topcorner.gif);
   background-repeat: no-repeat;
   background-position: top left;
}

div#board {
   width: 95%;
   margin: 0px auto;
}
</style>

I've not tested that but the basics should work... I think