How to put image on top of image in HTML/CSS? Nothing's working -

i trying take 1 image, place on screen background, , put company logo on top of looks 1 image. have looked @ other people's examples, , give me background want it, company logo want on top of background displayed beside background instead of on top. nothing try seems working. can please help? html:

<div id="background"> <img src="images/background/background.png"> </div> 

css:

div#background {  background-image:url('images/background/background.png')  background-repeat:no-repeat; } 

here's how i'd it. you'll need give surrounding div dimentions of background image:

html

<div class="background">     <img class="logo" src="http://placehold.it/150x75/ff0000/fff&text=logo" alt="company name" /> </div> 

css

.background {     position:relative; /*any child elements can positioned relative element*/     background-image:url(http://placehold.it/750x150&text=background);     background-repeat:no-repeat;     width:700px;    /*width of background image*/     height:150px;   /*height of background image*/ } 

example: http://jsfiddle.net/8rc7u/

there many different ways can position logo:

margins

.logo {     margin-top: 10px;     margin-left: 10px; } 

http://jsfiddle.net/8rc7u/1/

absolute positioning

.logo {     position:absolute;     top: 15px;     right:30px; } 

http://jsfiddle.net/8rc7u/2/

and that's starters.

on final note following may more accesible screen readers , better seo:

html - include company name text

<div class="background">     <h2 class="logo">company name</h2> </div> 

css - shift text off screen , use background image again

.background {     position:relative;     background-image:url(http://placehold.it/750x150&text=background);     background-repeat:no-repeat;     width:700px;     height:150px; }  .logo {     text-indent:-9999px; /*shift text off screen*/     width:150px; /*width of logo*/     height:75px; /*height of logo*/     background-image:url(http://placehold.it/150x75/ff0000/fff&text=logo);     margin: 10px 0 0 10px; /*positioning top right bottom left*/     display:inline-block;  /*set inline block margins apply inside parent*/ } 

example: http://jsfiddle.net/8rc7u/3/