WordPress.org

Support

Support » Themes and Templates » Strange Repeating Background-image behavior

Strange Repeating Background-image behavior

  • mortalwombat

    @mortalwombat

    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)
  • Moderator Andrew Nevins

    @anevins

    The background image is the curved dashed lines?

    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).

    Moderator Andrew Nevins

    @anevins

    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.

    esmi

    @esmi

    Forum Moderator

    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.

    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.

    Moderator Andrew Nevins

    @anevins

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

    esmi

    @esmi

    Forum Moderator

    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.

    mortalwombat

    @mortalwombat

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

    Moderator Andrew Nevins

    @anevins

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

    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?

    Moderator Andrew Nevins

    @anevins

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

    mortalwombat

    @mortalwombat

    Didn’t work :/

    Moderator Andrew Nevins

    @anevins

    Did you clear your browser cache?

    mortalwombat

    @mortalwombat

    I did.

    Moderator Andrew Nevins

    @anevins

    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.