inline double background

Hi Ray

Not sure if the solution (if there is one) is CSS, JS or PHP so am sorry if this is in the wrong category!

Have created a hero area which needs 2 background images - one that is dynamic and uploaded by the site owner and the other one an overlay (images/misc/heroOverlay.png)

I have had to set it up inline as below as not sure if there is a better way to do it using dynamic content and css? Anyway, the way I have it set I need to be able to hide the overlay image on breakpoints < 480 but as its inline I cant figure out how to do that.

<div class="coffee-span-12 heroContainer<?php if ("".($PageContents->getColumnVal("PageContentsID"))  ."" == "1") { ?> homepage<?php } ?>" style=" <?php if ("".($PageContents->getColumnVal("HeroLarge"))  ."" != "") { ?>background-image: url('plugins/./images/misc/heroOverlay.png'), url('./images/heros/<?php echo($PageContents->getColumnVal("PageImage")); ?>'); background-attachment: scroll, scroll; background-position: right center, right center; background-clip: border-box, border-box; background-origin: padding-box, padding-box; background-size: 50% 100%, cover; background-repeat: no-repeat, no-repeat;<?php } else { ?>  background-image: url('./images/heros/<?php echo($PageContents->getColumnVal("PageImage")); ?>'); background-attachment: scroll; background-position: right center; background-clip: border-box; background-origin: padding-box; background-size: cover; background-repeat: no-repeat;<?php } ?>">

which gives us an output of:

<div class="coffee-span-12 heroContainer homepage" style=" background-image: url('plugins/./images/misc/heroOverlay.png'), url('plugins/./images/heros/bg-motley-slider-content-page.jpg'); background-attachment: scroll, scroll; background-position: right center, right center; background-clip: border-box, border-box; background-origin: padding-box, padding-box; background-size: 50% 100%, cover; background-repeat: no-repeat, no-repeat;">

Thanks

Jamie

I'm afraid I don't really understand the question or issue. What exactly is wrong on the page? What do you want to do differently? Maybe call me so you can explain because I don't quite understand what you are trying to do or what I should be looking at.

sorry, am using 2 background images (1 layered over the other) in 1 container element.

The top layer will always be the image heroOverlay.png, the bottom layer will always be a dynamic image.

Because the bottom layer is dynamic, I have had to put the css code inline.

The problem that having the css inline brings is that on breakpoints below 480 I dont know how to hide the top layer without affecting the bottom layer

I've solved this 'problem' by creating a 2nd container element and layering it over the original each one with 1 background. It works...