Precisamente hoy he hecho lo mismo. Como veo que lo haces a partir de la plantilla por defecto (como yo) espero poder orientarte bien:
Primero ve al panel de control del administrador. Ve a la página
ESTILOS -> Temas y pulsa en enlace
Editar para ver todo el CSS del sitio y poder modificarlo (esta parte quizá ya la sabes hacer pero lo dejo escrito por si a alguien le pueda servir).
Utiliza
Ctrl+F en el navegador para encontrar lo siguiente:
.headerbar {
Verás que está definido en varios sitios. En el que define el archivo de fondo de la imagen, si ya has subido tu fondo con el mismo nombre no hace falta que lo modifiques. Para evitar que se repita busca el .headerbar donde se define lo siguiente:
Código:
background:#EBEBEB none repeat-x scroll 0 0;
Modifícalo así:
Código:
background:#aquielcolorquequieras none no-repeat scroll 0 0;
Lo fundamental es eliminar el
repeat-x y poner
no-repeat. El 0 0 sirve para posicionar la imagen de fondo arriba a la izquierda, puedes usar otros valores en píxeles o bien top, left, center, etc... para centrarlo, alinearlo de otra manera o como quieras.
El problema que te puede ocurrir es que estan definidas una serie de esquinas redondeadas en la cabecera (y en otros sitios). Si quieres eliminarlas puedes modificar el html o si no te quieres complicar mucho pudes hacerlo definiendo un estilo nuevo así:
Código:
.headerbar span.corners-top, .headerbar span.corners-bottom {
background: none !important;
}
Así eliminarás el efecto redondeado de la cabecera. Si quieres eliminarlo en más partes sustituye .headerbar por el elemento que quieres modificar.
Espero que esto te sirva, pero si te surge alguna otra duda dímelo.