Как разделить интервал между границами CSS (или) фоновым изображением отдельно?

Question

Мое меню навигации Wordpress (TwentyTwelve) отлично работает, но с дизайном я хотел бы сделать это, но не могу;

• нет фона для навигации (ясно, мы видим, фон страницы) = сделано
• Ли бордюр правого 1px твердое = сделано
• Ли висение фонового изображения, не повторять, нижний центр = сделано

Таким образом, проблема заключается в следующем: мое изображение bg слишком близко к моему навигационному тексту ... но если я добавлю добавку или высоту линии, то граница справа будет слишком длинной.

Итак, как добавить интервал под моим навигационным текстом, чтобы мое изображение bg (hover) опустилось ниже, но без выравнивания линии справа?

Смотрите мой CSS-код, если это помогает

`

.main-navigation li a { 
color: #fff; 
line-height: 1.0; 
text-transform: uppercase; 
white-space: nowrap; 
    background:; 
padding:0 15px 10px 15px; 
margin:0; 
border-right:#8fbf3d 1px solid; 
} 

.main-navigation li a:hover { 
color: #fff; 
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center; 
} 

.main-navigation .current-menu-item > a, 
.main-navigation .current-menu-ancestor > a, 
.main-navigation .current_page_item > a, 
.main-navigation .current_page_ancestor > a { 
color: #8fbf3d; 
font-weight: bold; 
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center; 
} 

`

Answer 1

до сих пор не нашли, что магия способ сделать это ... но я нашел альтернативу, которая могла бы работать

• удалили правую границу
• добавляемой фоновое изображение, выглядящую как право- линия границы (но его JPEG) и положить его выравнивание по правому краю
• добавила мою предыдущей обивку дна

работу!

Answer 2

вы можете использовать CSS;

background-position: 10px 10px; 

например, являющийся X и Y, вы также можете сделать это в процентах.

Также вы можете сделать;

background-position: center center; 

или

background-position: right top; 

, например.

EDIT ------ Я думаю, что у вас неправильный заказ вместо нижнего центра, используйте центр внизу, попробуйте;

background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat center bottom;