WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I can't figure out a solution for changing the black bar in Twenty Ten to individual background images behind each link. Using an image I created in Photoshop I have tried changing a few things in the CSS file but probably not the right changes.

Do I need to edit the functions file too?

share|improve this question

You can change the black bar of header navigation of WP TwentyTen theme by changing the background property of access id but when changing it try to make new rule more specific as following :

body #access{           
       background: none; // Add here image or color whatever you want

To apply individual background images behind each link, add background property to #access li element as shown below :

body #access li{           
       background: url('image.jpg') no-repeat;; // Add here appropriate image path
share|improve this answer
It works but the problem I have is my navigation text links are of different lengths so I created the image wide enough to accommodate all sizes except after implementing your solution the image behind each link looks squashed and distorted. I have included a screenshot for explanation purposes. i46.tinypic.com/2nqehb4.png – Smush Apr 15 '13 at 16:19
What is your expected output? display the screenshot? – Vinod Dalvi Apr 16 '13 at 4:14
the image behind each link in the navigation should look like this (with the ability to resize each image individually) which I created in Photoshop tinypic.com/view.php?pic=a31ngp&s=6 but from the screenshot I posted in my first reply as you can see it doesn't look how it should do. – Smush Apr 19 '13 at 11:04
Instead of image you can achieve same effect using background color and border radius css property. If you wan to use image then split it in three images right corner, left corner & middle image and apply it to the right and left to the list item & repeat middle image horizontally. – Vinod Dalvi Apr 19 '13 at 13:29
I would prefer to use an image as it is more likely to work in all browsers. How would the left, middle and right image work for when WP user decides to create a new link in the navigation. Is this my only choice if I want to use image? – Smush Apr 19 '13 at 14:46

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.