I am facing an issue with background images on my webpage. I have two elements that share a background image and are contained within 3 column width containers using Bootstrap.
In the second element, I have set the background to be 90% in width, making it slightly smaller than the other background. However, this causes constant flickering of the background in the first element when viewed in Firefox. The problem does not occur in Chrome or IE.
Has anyone else experienced a similar issue? Is this a bug specific to Firefox?
I tried replacing the image with an SVG, which resolved the flickering. Unfortunately, I cannot use an SVG in this case as the background image contains a lot of dirt and grunge textures, making the SVG file size too large (2MB).
Here is a snippet of the HTML and CSS code:
<section id="content-panel">
<div class="container">
<div class="row-fluid">
<div id="thankyou-1" class="span3 bubble-bg-2">
</div>
<div id="thankyou-2" class="span3 bubble-bg-2">
</div>
</div>
</div>
</section>
.bubble-bg-2 {
background: url('/Content/Images/bg-bubble-2.png') no-repeat;
background-size: contain;
}
#thankyou-1 {
padding-top: 15px;
text-align: center;
}
#thankyou-2 {
background-position: center 25px;
background-size: 90% auto;
padding-top: 15px;
}