CSS Background Image on top of image banner in HTML? -

i'm tweaking stylesheet of online conference website looks better. using chrome's "inspect element" feature combined "stylish" plugin create & save new stylesheet , have chrome replace preexisting stylesheet edited version, client-side (i.e. function of plugin). 1 area i'm having difficulty replacing image banner, it's image in html of page instead of on stylesheet (see screenshot):

http://i.imgur.com/jrrykvd.jpg

i able set background image in "bannerimgcell" class, http://mt215.sabameeting.com/siteroots/main/agendastorageroot/cobranding/000000ec87840000010d66d1e20a8001/en/us/images/banner.gif image remains on top of it. there way position background image class on top of image, looks new image banner there?

edit: sorry if i'm not being clear. i'm trying put new header image on preexisting 1 via css.

javascript solution:

you can change image source:

var newimg = "http://mt215.sabameeting.com/siteroots/main/agendastorageroot/cobranding/000000ec87840000010d66d1e20a8001/en/us/images/banner.gif" document.getelementsbyclassname('bannerimgcell')[0].setattribute('src', newimg); 

as render layers composed css background below img src. not sure if code work. assuming 'bannerimgcell' class of img tag , first one.

css solution:

.bannerimgcell:after {      background-image: url('somenewimg.gif');    /* width, height , position match overlaid element */  }