カスタムメニューに、それぞれ別の背景を表示したい

ネット上で見つけたカスタムメニューに、それぞれのメニュー属性を表示させるという方法を手本に、背景表示をしたいと考えています。
カスタムメニューの属性に、xxx.pngなど、画像名を登録しておき、
それをメニューの背景として使用したいのです。
試行錯誤していますが、
spanがいけないのか、表示できません。
何かヒントお分かりになる方、宜しくお願い致します。

functions.php

add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
function description_in_nav_menu($item_output, $item){
	/*元のコード*//*return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<br /><span>{$item->attr_title}</span><", $item_output);*/
	return preg_replace('/(<a.*?>[^<]*?)</', '$1' . "<span style='background:url(xxx.png) no-repeat center center;'></span><", $item_output);

表示php

<div>
		<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
	<nav id="aaa-navigation" class="bbb-navigation" role="navigation"><span>
	        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
		<?php wp_nav_menu( array( 'menu' => 'menu1','theme_location' => 'menu1', 'menu_class' => 'nav-menu' ) ); ?></span>
	</nav><!-- #site-navigation -->
</div>

css

.aaa-navigation li a {
	float: left;
	position: relative;
	display:block; /*a要素をブロックに*/
	width:123px;
	height:123px;
	border-radius: 50%;
	font-size: 11px;
	font-size: 0.785714286rem;
	text-indent:-7px;
	background:#EF652F;
	white-space: nowrap;
	color: #FFF;
	text-decoration:none;
	margin-left: 7px;
}
.aaa-navigation li a:hover {
	color: #FFF;
	background:#444;
}