I am currently designing a <div> with a gradual panning transparent background as part of an HTML module in opencart. Since it is a module, all styling must be self-contained.
Here is what I have achieved so far:
<style>
@keyframes backgroundScroll {
0% { background-position: 50% 50%; }
33% { background-position: 1% 50%; }
40% { background-position: 1% 50%; }
66% { background-position: 99% 50%; }
75% { background-position: 99% 50%; }
100% { background-position: 50% 50%; }}
#mtn-scroll {
width: 800px;
height: 100%;
background: url(coolpanoramapicture.jpg) no-repeat;
opacity: 0.1;
background-size: 250%;
background-position: 50% 50%;
animation: backgroundScroll 60s ease-in-out 1s infinite; }
</style>
<div id="mtn-scroll">
<div>
Content text goes here!
</div>
</div>I want the opacity to only affect the background image and not the text. I have heard suggestions about using ::before, but I am unsure how to implement it. Any ideas?
Is there a way to make only the background image transparent without needing a transparent PNG file?