Grow your CSS skills. Land your dream job.

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

  • # February 5, 2013 at 1:57 am

    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: http://jsfiddle.net/joshnh/CpMbb/

    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!

    UPDATE:

    Keith Chu suggested that I have the banner extend under the navigation (https://twitter.com/Catharsis/status/298688479246835712) like so: http://jsfiddle.net/CpMbb/1/

    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): http://jsfiddle.net/joshnh/UazCp/

    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?

    # February 5, 2013 at 2:47 am

    You could do it like this:

    http://codepen.io/chriscoyier/pen/DFdJi

    # February 5, 2013 at 2:51 am

    @chriscoyier I was thinking about going down that path, but I need IE7 support. Sorry for not stating that in my original post, I’ve updated it to reflect that now.

    Also, each nav item can’t exceed the content plus padding width. Is there an easy way to get that behaviour using display: table;? Normally removing width: 100%; on the parent would work, but in this case, that breaks the way the background image is set up.

    # February 5, 2013 at 2:54 am

    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.

    # February 5, 2013 at 2:56 am

    @HugoGiraudel I’ve just updated the original post with another idea. What do you think? I need it to work in IE7.

    # February 5, 2013 at 2:59 am

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

    # February 5, 2013 at 3:03 am

    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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".