Need background image over another background image

Question

I have not been successful in solving this so far, so i need help. What I am trying to do is have a background image fitting a tablet. Inside I have a table, as well as a top right logo, but now I am trying to have a logo that is transparent be on the background about only half of the screen.. the logo is an eagle, but i only want half of it on the background. the eagle has to be on top of the background (transparent) but also be behind the table.. ideas? Suggestions? Code wise?

To be basic, have a background image over another background image (transparent), and only cover half on screen.

Thanks

body { width: 100%; height:100%; display: -webkit-box; display: -moz-box; display: box; text-align:center;

background:url(1xx.png);
-webkit-background-size: cover !important;
-moz-background-size: cover;
background-size: cover;
font-family: Arial, Times New Roman, sans-serif;
font-size: 20px; 
z-index:0; }  body{   display: table;     width: 100%;    } .box {
width: 75%;
height:90%;

margin-left:auto;
margin-right: auto;
margin-top:auto;
margin-bottom: auto;
 }

Answer 1

There are two options, either use the CSS3 multiple backgrounds:

background-image: url(eagle.png), url(background-image.png);
background-position: left top, center top;
background-repeat: no-repeat;

or position the eagle over the background using position:Absolute;