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

Home Forums CSS What’s the best way to line background images up across multiple elements?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #42486

    Okay, so to outline the situation:

    * I have a banner element near the top of the page

    * The banner element has a menu sitting directly above it

    * The active navigation item is indicated by giving it a background colour matching that of the banner

    * The banner has a repeating background patter

    * I would like the active navigation item to seamlessly continue the background pattern, no matter which item is active

    * It needs to work in IE7

    Here is a mockup:

    Also, here is a jsFiddle with the markup for you to experiment with:

    I’d really like to do this with CSS only as it’s just a styling issue, but I also need to keep it dynamic (it must work in a responsive environment).

    Any suggestions would be greatly appreciated. Thanks in advance!


    Keith Chu suggested that I have the banner extend under the navigation ( like so:

    The only problem with that solution is that it introduces an issue in regards to the background showing through on the right hand side of the navigation.

    UPDATE 2:

    After talking a little more with Keith, we’ve managed to come up with what seems to be a working solution (and by we, I mean Keith, I only changed one line of his proposal):

    Basically, the background colour and pattern has been placed on the unordered list, and the list items are given a white background. That background is then removed when given a class of active.

    What are your thoughts? Any problems with this approach? Any ways to improve it?

    Chris Coyier

    You could do it like this:

    Kitty Giraudel

    If you want an easy, cross-browser, responsive solution, I think @chriscoyier’s one is really good. Just be sure to add a fallback to :not() if not supported.

    Kitty Giraudel

    That sounds great Joshua. Especially since background-color: transparent is a CSS1 specification (if no mistake).

    Chris Coyier

    You don’t really need :not() – you could just adjust JS to add both .active and .inactive classes and style based on that. And use an actual table. (nobody will die).

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