Whirlpool

hey guys, I'm trying something that I'm not sure if it's possible or not.
I have a background thats 800px wide and 2 pictures that are both 300px wide by 250 height.

what I'm trying to do is put the 2 smaller pictures side by side on top of the main background, and still be able to type over them.

each of the pictures will hold certain data and I'm not putting them side by side because there may be times when I only need one or the other, not both.

is this possible using css ?

I tried using background-position and div within div but none came out right.

any help would be greatly appreciated

Lustat writes...

what I'm trying to do is put the 2 smaller pictures side by side

each of the pictures will hold certain data and I'm not putting them side by side

clarify

|--------------------------------------|
|        background pic 1              |
| |--------------|  |----------------| |
| |   bg 2       |  |   bg3          | |
| |--------------|  |----------------| |
|                                      |
|--------------------------------------|

I'll be adding text over background 1
bg2 and bg3.
reason I need them as 3 seperate pictures is because there may be times when I'll have to add just another bg3 only or bg2 only. so I need that flexibility

Experiment with this idea. Assign widths and heights accordingly

.content {
   position: relative;
   margin-top: -100px;
}

,backgroundPic2 {
   float: left;
}

,backgroundPic3 {
   float: right;
}

<div class='backgroundPic1'>
   <div class='backgroundPic2'></div>
   <div class='backgroundPic3'></div>
   <div class='content'>
      <p>My leprechauns eat migoreng</p>
   </div>
</div>

body {
  background: url("bg01.jpg") no-repeat top center; }

#wrapper {
  position: relative; width: 800px; margin: 0 auto; }

.contentBox {
  float: left; width: 300px; height: 250px; padding: 0 50px; 
  background-repeat: no-repeat; }

.cB01 {
  background-image: url("bg02.jpg"); }

.cB02 {
  background-image: url("bg03.jpg"); }

<div id ="#wrapper">
  <h1>Title</h1>

  <div class="contentBox cB01'>
     <h2>Body copy</h2>
  </div>

  <div class="contentBox cB02'>
     <h2>Body copy</h2>
  </div>
</div>