Imagen de fondo en el header

[huam]

hola todos,
a ver si alguien que controle del tema me puede echar una mano. Al foro que estoy instalando quiero darle una apariencia como si estuviese integrado en mi página, al menos con la imagen de la cabecera.
Hasta ahora he cambiado el ancho del foro y le he cambiado el fondo del body como el de la página, ahora lo que quiero hacer es poner una foto como imagen de fondo. Me he mirado no sé cuantos posts y temas relacionados en otros foros pero lo unico que he encontrado son soluciones a mi parecer mas complicadas y que van mas alla de lo que necesito, en principio se podria hacer cambiando el archivo original bg_header de la carpeta theme/images/ por la imagen que deseo poner pero despues no encuentro donde cambiar en la hoja de estilos para que no se repita la imagen . Bueno resumiendo, poner la misma imagen de fondo del header de la web en el foro y sobre esta imagen pondria el logo (con el link), cuadro de busqueda etc
La imagen seria la de la cabecera de www.holapolonia.com para poner en el foro www.holapolonia.com/foro

Gracias desde ya! espero haberme explicado bien, es que a estas horas de la noche uno ya anda un poco espeso

saludos

[Osdiwe]

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.

[huam]

osliwe, ya de entrada te doy las gracias por lo del ctrl+f, ya te puedes suponer que me podria volver loco buscando "a pelo" en la hoja de estilos y ya solo con eso que me has dicho me he ahorrado monton de tiempo y ganado salud para mis ojos.
Siguiendo un poco tus consejos lo que he hecho es ponerle el no-repeat al .headerbar { le he quitado el repeat

, mas adelante, en donde estan definidos los bordes le he puesto la imagen de fondo que queria poner:
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
background-color: #12A3EB;
background-image: url(fotos/mi_foto.jpg);
color: #FFFFFF;

en este caso, en lugar de colocar la foto que quiero en la carpeta \prosilver\theme\images\ indico que saque la misma imagen que tengo en el header de la pagina, o sea, en donde pone esto:

background-image: url("{T_THEME_PATH}/images/bg_header.gif");

le he puesto esto:

background-image: url(/carpeta_de_fotos/mi_foto.jpg);

No sé si esto que he hecho es lo correcto pero me ha funcinonado (al menos por ahora. Segudiamente quitaré las esquinas redondeadas y despues lo que quiero es cambiar el heigh del header para que sea igual de alto que la foto, en donde estaria definido este? se puede hacer directamente desde el ACP o es con estilos?

Gracias nuevamente

[Osdiwe]

Personalmente te recomendaría que aunque te funcione esto:
background-image: url(/carpeta_de_fotos/mi_foto.jpg);

utilizara siempre las rutas con la variable T_THEME_PATH, simpelmente debes poner tu imagen dentro del directorio images de la plantilla. Así te aseguras que no te dará problemas y más si alguna vez tienes que mover el foro, implementar el diseño en otro, etc...

Y respeco al height del header, definiendo un height: en el mismo .headerbar creo que tendrás suficiente. Sinó tambien puedes jugar con los valores margin o padding del mismo.

[huam]

muchas gracias nuevamente Osdiwe,
efectivamente he hecho como lo que me has recomendado y funciona perfectamente. El height lo he cambiado tal como has dicho.
Ya me dejará caer otra vez por aquí a medida que me vayan saliendo más dudas (que no son pocas)
saludos

[Osdiwe]

Aquí estamos para lo que necesites. Hasta otra.