Floating an image above a background inage

Can this be done?

[HarryM]

I am trying to float an image so that it partially covers two divs, one of which contains a background image.

CSS

.float {
float:right;
height:80px;
margin:10px 10px 0 0;
}

.container {
height:100px;
}

.div1 {
height:50px;
background-color:#FF0000;
}

.div2 {
height:50px;
background-color:#0000FF;
}

.div3 {
height:50px;
background-image:url(images/image.jpg); /* this is a big image which fills the div */
background-position:top right;
background-repeat:no-repeat;
}

HTML

The following HTML works and the image sits across both coloured divs.

<div class="container">
<img class="float" scr="images/someimage.jpg" alt="">
<div class="div1"> <!-- some text --> </div>
<div class="div2"> <!-- some text --> </div>
</div>

But the following does not. The floated image forces the background image to the left.

<div class="container">
<img class="float" scr="images/someimage.jpg" alt="">
<div class="div1"> <!-- some text --> </div>
<div class="div3"> <!-- background image --> </div>

I believe the CSS is working as it should, but I was wondering if anyone had a suggestion how this can be done?

[Basman]

Do you realize that your last piece of code is not complete. You forgot to close the container-div. It should be this:

<div class="container"> 
<img class="float" scr="images/someimage.jpg" alt=""> 
<div class="div1"> <!-- some text --> </div> 
<div class="div3"> <!-- background image --> </div>
</div>

I'm not quite sure whether it solves your problem, but anyway ;)

[HarryM]

Thanks, but that was just a typo.

In practical terms I later solved the problem by putting the background image in the styles for the container div. The floated image was then displayed correctly on top of the background. Since then I have simplified it even more by merging the two images to create one background image.

It's a bit academic, but I would still like to know if what I did originally should have worked.

[Basman]

I've got a website that has a container-div and three divs that are placed upon each other like layers (sorry about my 'bad English').

It looks something like this:

#container{
top:0px;
width: 650px;
height:275px;
margin: 0 auto;
position: relative;
}
#roof {
width: 650px;
height:150px;
left:0px;
top:0px;
position: absolute;
background-image: url(../images/roof/roof.png);
background-repeat: no-repeat;
background-position: center top;
z-index: 4;
}
#head{
width: 650px;
height:175px;
left:0px;
top:100px;
position: absolute;
background-color:#FFFFFF;
background-image: url(../images/head_jpg/rotator.php);
background-repeat: no-repeat;
z-index: 1;
}
#logo {
width: 154px;
height:175px;
float:right;
right:0px;
top:100px;
position: absolute;
background-repeat: no-repeat;
z-index:3;
background-image: url(../images/logo/logo.png);
background-position: center center;
}

As you can see, i've used the 'z-index'-tag to rank the divs. The 'roof' has a z-index of 4, the highest number, and is therefore placed in front; the 'logo' comes in second and at the back there is the 'head' random jpg, which has the lowest z-index.

Maybe this will help ;-)