SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Image Issues with my CSS

    Hey guys,

    Having an issue with an image on my page... Here is the link...


    http://modocom.ca/wordpress/


    You'll notice it loads but then right when you start to scroll down it the Lowery's logo and image just have a sudden glitch just small but jumps is this because the positioning is not the same on the CSS as Javascript?

    If so, where exactly can I make this fix.

    Thanks,

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I don't see a problem. How many browsers have you tested this in? (Or what browser is the problem happening in?)

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Having the problem in Firefox and Chrome.

    If you go to the page you can notice in Chrome the image of Lowerys logo is cut off a bit then when you begin to scroll you'll notice the Lowerys logo jumps down a bit and the background image of the purple dudes shifts to the left a bit, just need to fix this so it doesnt appear to jump.

    Thanks

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anyone have a chance to take a peek at this

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Code:
    #story-lowerys .bg {
        background: url("../../images/lowerys-logo.png") no-repeat fixed 50% 190px;
        height: 1600px;
        left: 100px;
        position: absolute;
        top: 0;
        width: 1600px;
    }
    
    #story-lowerys {
        background: url("../../images/bg_2.jpg") no-repeat fixed 50% 0;
        height: 1600px;
        margin: 0;
        overflow: hidden;
        width: 100%;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I've no idea what's gone wrong with the above post but I can't seem to edit it correctly at all

    It should have said "Try changing the starting background-positions to this".

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect that worked....

    Do you notice a little jump vertically as well, like by 50px or so it appears... Is that one an easy fix as well just so it all flows smoothly instead of the jump on initial scroll.

    Thanks man your a genius!!!

    Mike

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The 190px was to stop the vertical jump. I only see about a 5px jump now so just adjust that 190px a bit. Unless you meant something else.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    605
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok I did this and fixed the background jumping as well... But noticed one other issue in Chrome sometimes the Lowerys logo when you load the page half cut off for some reason sometimes the top of it doesnt show, any way to fix this?

    Thanks,

    Mike

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    It looks like a rendering bug in chrome and I'm not sure there is a real fix for it.

    I can tell you the cause and you may be able to work around it. The trigger is the position:relative in .story and you can test this by adding position:static here:

    style="position:static"
    HTML Code:
    <section class="story" style="position:static" id="story-lowerys" data-controller="Lowerys"  data-scrolloffset="100">
    <div class="bg"></div>
    </section>
    <!--story-->
    The nested element .bg is placed absolutely but you may be able to getaway without a stacking context if you avoid using co-ordinates and instead use margins to move it around (I tested locally and the left:100px didn;t actually seem to break it but I wasn't working with the full site).

    Hopefully that will give you something to try anyway.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •