CODEWITHSUNDEEP
htmlcss
Joshpho
Joshpho

Reputation: 85

CSS Background Image on top of image banner in HTML?

I'm currently tweaking the stylesheet of an online conference website so it looks better. I will be using Chrome's "Inspect Element" feature combined with the "Stylish" plugin to create & save the new stylesheet and then have Chrome replace the preexisting stylesheet with my edited version, client-side (i.e. the function of the plugin). The one area I'm having difficulty with is replacing the image banner, as it's an image in the HTML of the page instead of on the stylesheet (see screenshot):

https://i.sstatic.net/Jp6RW.jpg

I am able to set a background image in the "bannerimgcell" class, but the http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif image remains on top of it. Is there any way to position a background image for this class on top of the image, so that it looks like a new image banner is there?

EDIT: Sorry if I'm not being clear. I'm trying to put a new header image over the preexisting one via CSS.

Upvotes: 0

Views: 2577

Answers (2)

Mircea
Mircea

Reputation: 11613

JavaScript Solution:

You can change the 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 the render layers are composed your CSS background will be below the img src. Not really sure if this code will work. I am assuming that 'bannerimgcell' is the class of the img tag and its the first one.

CSS Solution:

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

Upvotes: 2

Singular1ty
Singular1ty

Reputation: 2615

I think what you may be looking for is using:

position: absolute;
z-index: 2;
background-image: url('yourimage.jpg');

That would place whatever element is styled by those rules, up and above anything below it, provided that the element beneath it has a lower z-index (by default it would).

position:absolute means that you'll have to manually place the new CSS element over the existing content, and make sure that all the widths and heights align so that you don't see the old image below.

Upvotes: 0

Related Questions