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

[joshuanhibbert]

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?

[Chris Coyier]

You could do it like this:

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

[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).

[Author]

Posts