WordPress.org

Ready to get started?Download WordPress

Forums

Strange Repeating Background-image behavior (20 posts)

  1. mortalwombat
    Member
    Posted 1 year ago #

    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

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    The background image is the curved dashed lines?

  3. mortalwombat
    Member
    Posted 1 year ago #

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

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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.

  5. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    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.

  6. mortalwombat
    Member
    Posted 1 year ago #

    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.

  7. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    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.

  9. mortalwombat
    Member
    Posted 1 year ago #

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

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  11. mortalwombat
    Member
    Posted 1 year ago #

    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?

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  13. mortalwombat
    Member
    Posted 1 year ago #

    Didn't work :/

  14. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Did you clear your browser cache?

  15. mortalwombat
    Member
    Posted 1 year ago #

    I did.

  16. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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.

  17. mortalwombat
    Member
    Posted 1 year ago #

    I agree 100%, but I would still like to find a resolution simply because once I hand this theme to the client, I have no control over how long they may make a post. The posts you currently see are copies of their existing posts, so you can see how long they already are. I will, of course, advise the client not to make her posts too long, but clients always seem to push the limits of their websites.

  18. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    If you don't find a solution on this forum, you may want to ask a forum that specialises in CSS http://csscreator.com/forum .

  19. mortalwombat
    Member
    Posted 1 year ago #

    Thanks. I may check out there as well. I appreciate it.

  20. mortalwombat
    Member
    Posted 1 year ago #

    I did just come up with a hacky solution. Background-attachment: fixed;

    Fortunately it works, but if it were a textured background, it would look like hell.

Topic Closed

This topic has been closed to new replies.

About this Topic