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).
Cut off: http://postimg.com/84000/photo-83759.jpg
Not cut off: http://postimg.com/84000/photo-83760.jpg
The actual page is located at: https://www.isupelive.com/isupe/web/main.php
Just hit refresh on the page a couple of times with Google Chrome and the problem should repro.
The CSS and Javascript can be seen in full on the page, but here are some excerpts:
HTML and CSS:
`
`
Javascript/jQuery to change the image on mouseover:
`$(document).ready(function()
{
// Preload Images
preload();
// 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’)”);
}
);
});`
Any ideas why this is happening or how to fix it? Workarounds? Thanks in advance…
