The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background-image is getting partially cut off in Chrome sporadically

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #39824

    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:
    Not cut off:

    The actual page is located at:
    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:
    // Preload Images

    // Mouse over effect
    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…

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.