• I am having some strange behavior from the repeating background-image. It doesn’t extend the length of my posts. I admit, the posts are REALLY long at the moment, because I haven’t formatted them at all, and they are image heavy, but either way it illustrates the issue well. What’s odd, is depending on the system, it behaves differently. In IE, it works fine. In FF on my laptop, it starts at the top, and ends somewhere in the middle. On FF on my desktop, it starts mid way down, and ends before the bottom.

    Here is the site as it sits right now: http://mattandjentry.com/otgb/. I have set the background color to green to make the backgroun-image more visible (It’s really light).

    Another strange note… the background-image moves when you hover over the images in the post. I’m confused.

    Edit~ I figured out why it was showing up in the center on one browser. The CSS positioned the background to center. Fixed that, but it’s still not repeating to the bottom, and it still moves when you hover over images o_0

Viewing 15 replies - 1 through 15 (of 19 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The background image is the curved dashed lines?

    Thread Starter mortalwombat

    (@mortalwombat)

    Oh sorry, should have been more clear. The background image is the nearly white part on the content. Like I said, It’s really light… scroll down and you will see the background change to green (assuming your browser is doing the same as mine are).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t see the green, but the background image is a horizontal gradient from light blue to white?

    I’m using Chrome 21.0.

    I can using Firefox. Looks like some kind of weird jQuery effect to me. I can actually trigger the appearance of the bright green background by clicking in the body content area.

    Thread Starter mortalwombat

    (@mortalwombat)

    Andrew: Yeah, that gradient is the repeating background-image. It repeats vertically, of course. I don’t see the issue in Chrome either.

    esmi: It does look that way, doesn’t it? I promise it’s not any sort of jQuery I put in though. I started my theme based on the WordPress Naked theme, and so far have only made modifications to the php and css files.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try removing styles one-by-one, applied to <div id="canvas">, to find whether or which CSS style is responsible.

    I promise it’s not any sort of jQuery I put in though.

    It’s really weird! I can only suggest that you follow Andrew’s advice and start pulling out CSS bit-by-bit.

    Thread Starter mortalwombat

    (@mortalwombat)

    Used firebug to remove everything on #canvas except the background image decleration. Still messes up.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It may have something to-do with the page’s loading time. Is there another, emptier page you could experiment with?

    Thread Starter mortalwombat

    (@mortalwombat)

    It does seem like it could be related. I just created this one http://mattandjentry.com/otgb/length-test/ which seems to work much better.

    So assuming the problem is the mass amounts of images taking a long time to load, is there anything that can be done?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try reducing your repeated background image down to a 1 pixel height. If that increases the problem, try increasing the background image height.

    Thread Starter mortalwombat

    (@mortalwombat)

    Didn’t work :/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Did you clear your browser cache?

    Thread Starter mortalwombat

    (@mortalwombat)

    I did.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    All I recommend is you shorten the length of your page.
    This page http://mattandjentry.com/otgb/ has a height of over 82,000 pixels, which not only is provoking this problem but is slow to load.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Strange Repeating Background-image behavior’ is closed to new replies.