StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackground-image is getting partially cut off occasionally in Chrome
text
Body
copied!<p>I am working with a customer who wants a faint image in the background of their page and when the user mouseover's a certain control, the background image becomes clear. I have done this with success in Firefox. However, Chrome is giving me trouble sporadically. It seems to cut off the upper half of the background image OCCASIONALLY. Not every time, but sometimes. I don't know if there is any pattern to it. Here is what it looks like (view the left half of the screen shot). </p> <p>Getting cut off:<img src="https://i.stack.imgur.com/lhQZ0.jpg" alt="Cut off"> Not getting cut off:<img src="https://i.stack.imgur.com/BqAAG.jpg" alt="Not cut off"> The actual page is located at: <a href="https://www.isupelive.com/isupe/web/main.php" rel="nofollow noreferrer">https://www.isupelive.com/isupe/web/main.php</a> Just hit refresh on the page a couple of times with Google Chrome and the problem should repro.</p> <p>The CSS and Javascript can be seen in full on the page, but here are some excerpts:</p> <p>HTML and CSS:</p> <pre><code><section id="thesection" style="background-image:url('../images/bg-95.png'); background-repeat:no-repeat; background-attachment:fixed; background-position: 0px 90px;"> </code></pre> <p>Javascript/jQuery to change the image on mouseover:</p> <pre><code>$(document).ready(function() { // Preload Images preload(['../images/bg-100.png', '../images/bg-95.png']); // Mouse over effect $("#logout").hover( function () { $("#thesection").css("background-image", "url('../images/bg-100.png')"); }, function () { $("#thesection").css("background-image", "url('../images/bg-95.png')"); } ); </code></pre> <p>Any ideas why this is happening or how to fix it? Workarounds? Thanks in advance...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload