[danny_dinero]

Hey buddy,

What I did was go to Custom CSS in the template and I added the following code

#header-section:before { 
background-image:url('http://www.yourwebsite.com/images/banner.jpg') !important;
background-size:900px 120px;
background-repeat:no-repeat;
background-position:center; 
}

Add whatever height and width you want. Note that this creates a background image in the header position, so it might not be exactly what you want, but you should be able to tweak the CSS to your needs. This is actually the desired effect I wanted as I wanted my header image to be behind the menu as well.

Hope this helps.

[danny_dinero]

This seems to be a pretty common question. You should include it as apart of the theme options.

[danny_dinero]

Hi,

Almost exactly what I need, however this will add a hover effect for all the images on the site which is not what I want. I want to limit it to only some images.

I’m not the most knowledgeable person in CSS, but I think I may be able to do this by adding a text block from the page builder, then adding my image to the text block, and then specifying an Extra class name (which will be referred to in the Custom CSS)?

I have added some screenshots to illustrate this, however it hasn’t worked. Any help?

Thanks again

[danny_dinero]

Hi,

I posted the same question (which I’ll now remove since I found this thread) and would like to know the solution.

Thanks

[danny_dinero]

Hi Ed,

That is almost what I am after, however if I specify a URL for the image to link to (which is what I want) then the hover overlay does not work.

I wonder if there is another way I could implement this? I have also tried adding a Text Block with the page builder, then adding an “Image Banner” shortcode. In there you can specify “Content Animation”, but that will only work when the page is first loaded…not on hover.

Thanks

[danny_dinero]

Hi Melanie,

Thanks for your response! Please let me know if there are plans for it because I think it would very useful.