Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Background Reload

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #28768
    mrks
    Member

    Hello!

    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:

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

    #header ul#nav li.work 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 li.blog a:hover {
    background: url(“images/right-hover.png”) no-repeat;
    }

    The Stylesheet for the page is here: http://creativebrains.net/test/style.css
    And here is the live version: http://creativebrains.net/test/

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

    #74389
    noahgelman
    Participant

    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.

    https://css-tricks.com/video-screencasts … s-sprites/

    #74393
    mrks
    Member

    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?

    Thanks!

    #74394
    noahgelman
    Participant

    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.

    #74441
    mrks
    Member

    Okay, now it works :)

    Thank you!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.