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;
 }

can you post what you've tried so far? some code (a fiddle would be nice) — Bobo, Aug 09 '13 at 18:05
Why not just change the opacity of the eagle and put it wherever you want? — brbcoding, Aug 09 '13 at 18:06
does this help: http://www.css3.info/preview/multiple-backgrounds/ — andi, Aug 09 '13 at 18:08
thank YOU! solved it! what can i do to position it on the left side only(half of image showing) — Sergio, Aug 09 '13 at 18:21
@Sergio I would position it at `left:0; tranform:translateX(-50%)` regarding your last question in the comment above.. — Maoritzio, Mar 24 '19 at 08:46

score 9 · Accepted Answer · answered Aug 09 '13 at 18:18

9

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;

answered Aug 09 '13 at 18:18

Lost Left Stack

1,932
13
14

my background has no set position, how can i make it so then the eagle covers only half the background(left to right) where would the code go? – Sergio Aug 09 '13 at 18:23
What do you mean that it only covers half? How large is the eagle? can you show me a screenshot of what it currently does? – Lost Left Stack Aug 09 '13 at 18:28
How to make these fixed? – Björn C Nov 11 '16 at 09:23

score 0 · Answer 2 · answered Aug 09 '13 at 18:09

It's hard to distinguish what you're going for without seeing code but if I were to take a stab at giving you an answer I'd say to simply set your background using the body tag and then just under it set up a div that is absolutely positioned to the top. After that your content should act as normal.

score 0 · Answer 3 · answered Aug 09 '13 at 18:22

This solution is the same as @ChadP suggested, just some code here for you to look at. There's a lot of assumptions being made on my part as you don't have a lot of code to go off of.

http://jsfiddle.net/R4KUg/

CSS

body {
    background-image: url('http://lorempixel.com/1200/1200/');
    margin: 0;
}
header {
    height: 250px;
}
#eagle {
    background: transparent url('http://lorempixel.com/600/200/') no-repeat center center;
    height: 200px;
    width: 100%;
    position: absolute;
    top: 250px;
    opacity: 0.5;
}

HTML

<div id="eagle"></div>
<div id="wrapper">
    <header>
        <h1>A header</h1>
    </header>
    <table>
        <tr>
            <td>Column One</td>
            <td>Column Two</td>
            <td>Column Three</td>
        </tr>
    </table>
</div>

Need background image over another background image

3 Answers3