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!
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.
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
What are your thoughts? Any problems with this approach? Any ways to improve it?# February 5, 2013 at 2:51 am
This reply has been reported for inappropriate content.
@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.
You must be logged in to reply to this topic.