Treehouse: Grow your CSS skills. Land your dream job.

[Solved] Background Reload

  • # April 18, 2010 at 11:05 am


    I’m working on a new Portfolio and i have a little problem, which bugs me.
    The Problem is, when i add a hover background over an existing background, he "reloads" about > 1 second and this doesnt looks very nice.

    This is the CSS Code for the :hover:

    #header ul#nav a:hover, #header ul#nav li.about a:hover, #header ul#nav a:hover {
    height: 130px;
    width: 130px;
    display: block;
    text-indent: -99999px;
    margin: 26px 0 0 24px;

    #header ul#nav a:hover {
    background: url(“images/left-hover.png”) no-repeat;

    #header ul#nav li.about a:hover {
    background: url(“images/middle-hover.png”) no-repeat;

    #header ul#nav a:hover {
    background: url(“images/right-hover.png”) no-repeat;

    The Stylesheet for the page is here:
    And here is the live version:

    Can anybody say me, how i can prevent this, i call it reload, or does anybody know a better way to code the Navigation?
    I tried it with CSS3, but the problem is (IE of course) that i have 3 Circles with RGBa and the only way to position them is with position:absolute (so i cant define that it should be in the wrapper) and so it looks differently for every monitor resolution.

    Would be great when one of you can help me :)

    # April 18, 2010 at 3:03 pm

    That is because you are using so many images in your navigation. Since it has to fetch each one, it’s too slow. That whole thing should just be one image. Make the image a "Sprite". Here’s is Chris’s tutorial to do so. … s-sprites/

    # April 18, 2010 at 4:18 pm

    Okay, thought its a problem with CSS, that i cant overlay another background or something like that..

    But one question: Where do I have to define the Sprite Image?
    I mean, that i have to write "background-position:xx" at the a:hover is clear, but where should i write "background: url(sprite.png)"? In the #header ul#nav?


    # April 18, 2010 at 4:45 pm

    You set the new sprite image as the background of each of the list items and use back-position: xx to move the image so each of the images line up to look like one image. and then on the hover you give it a new background-position.

    # April 19, 2010 at 2:07 pm

    Okay, now it works :)

    Thank you!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.