Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Thryks en 5 Septiembre 2015, 20:39 pm



Título: [Resuelto] background imagen en header
Publicado por: Thryks en 5 Septiembre 2015, 20:39 pm
Resulta que tengo un header en html5 y quiero ponerle un background (una imagen) pero quiero darle formato a esta imagen, lo que me ocurre esque solo me aparece la imagen si la pongo en el html desde el header con este codigo
Código:
<header style="background: url(img/backhead.jpg)">
<p>Cualquier cosa</p>
</header>
si lo pongo en el fichero css de esta forma:
Código:
header{
background-image: url(/img/backhead.jpg);
}
no me sale, también he probado poniendole comillas simples a la ruta y comillas dobles, he probado metiendole mas atributos y tampoco, porfavor necesito una solucion a esto que me está estresando bastante.
Perdonen mi ignorancia sobre el tema y gracias de antemano por leer y/o contestar.


Título: Re: background imagen en header
Publicado por: DeMoNcRaZy en 5 Septiembre 2015, 20:44 pm
Buenas,

¿Te puede servir algo así?

Código
  1. <div class="header">
  2. <p>Cualquier cosa</p>
  3. </div>

Código
  1. .header{
  2. background-image: url(./img/backhead.jpg);
  3. }

Recuerda que al tener la imagen en una ruta y el archivo css en otra.. la url de la imagen cambia.

Saludos.


Título: Re: background imagen en header
Publicado por: Thryks en 5 Septiembre 2015, 22:19 pm
Buenas,

¿Te puede servir algo así?

Código
  1. <div class="header">
  2. <p>Cualquier cosa</p>
  3. </div>

Código
  1. .header{
  2. background-image: url(./img/backhead.jpg);
  3. }

Recuerda que al tener la imagen en una ruta y el archivo css en otra.. la url de la imagen cambia.

Saludos.

La verdad es que tal y como me lo has dicho me ha servido, ahora tengo otro problema, con un div me sale bien pero poniendo un header me es imposible cambiar desde el css el background.


Título: Re: background imagen en header
Publicado por: someRandomCode en 5 Septiembre 2015, 22:26 pm
Pasa que cuando en CSS pones .header estas hablando de una CLASE que se llama header, o mejor dicho, de todos los elementos que tengan o hereden de esa clase.
para poner el styling en el elemento body/header/footer/heading no lleva el punto adelante y se reconoce desde el momento en el que lo invocas como <header> por ejemplo..


Título: Re: background imagen en header
Publicado por: DeMoNcRaZy en 5 Septiembre 2015, 22:30 pm
La verdad es que tal y como me lo has dicho me ha servido, ahora tengo otro problema, con un div me sale bien pero poniendo un header me es imposible cambiar desde el css el background.

Si has echo lo del div en el mismo archivo, prueba así en el css.

Código
  1. header{
  2. background-image: url(./img/backhead.jpg);
  3. }

Puede que sea por que no se especifica bien la ruta de la imagen.
Prueba y coméntanos.

Saludos.


Título: Re: background imagen en header
Publicado por: Thryks en 5 Septiembre 2015, 23:35 pm
Pasa que cuando en CSS pones .header estas hablando de una CLASE que se llama header, o mejor dicho, de todos los elementos que tengan o hereden de esa clase.
para poner el styling en el elemento body/header/footer/heading no lleva el punto adelante y se reconoce desde el momento en el que lo invocas como <header> por ejemplo..
He quitado el punto ya que se q no es una clase y he puesto el header normal, sigue sin funcionar, he verificado ahora la.ruta varias ceces y es la correcta


Título: Re: background imagen en header
Publicado por: #!drvy en 5 Septiembre 2015, 23:55 pm
Asegurate que usas un navegador compatible (IE < 9 no funciona). Asegurate que no tienes ninguna regla que lo reemplaze después o algo. Y claro, si estas under Linux asegurate de que la imagen tiene permisos de lectura.

Saludos


Título: Re: background imagen en header
Publicado por: Thryks en 6 Septiembre 2015, 14:49 pm
Gracias a todos por vuestros comentarios, me sirvieron de mucho, pero resultó alfinal ser lo más tonto, resulta que en vez de poner ../img/backhead.jpg puse ./img/backhead.jpg un error de novato, disculpen las molestias pero igualmente esta experiencia me ha refrescado algunas cosas. Gracias, cierro el hilo.