elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] background imagen en header
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] background imagen en header  (Leído 2,843 veces)
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
[Resuelto] background imagen en header
« 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.


« Última modificación: 7 Septiembre 2015, 17:50 pm por #!drvy » En línea

Futuro Sysadmin
DeMoNcRaZy


Desconectado Desconectado

Mensajes: 420


$~*|_


Ver Perfil
Re: background imagen en header
« Respuesta #1 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.


En línea

Esta página web no está disponible - Google Chrome
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: background imagen en header
« Respuesta #2 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.
En línea

Futuro Sysadmin
someRandomCode

Desconectado Desconectado

Mensajes: 250



Ver Perfil
Re: background imagen en header
« Respuesta #3 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..
En línea

DeMoNcRaZy


Desconectado Desconectado

Mensajes: 420


$~*|_


Ver Perfil
Re: background imagen en header
« Respuesta #4 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.
En línea

Esta página web no está disponible - Google Chrome
Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: background imagen en header
« Respuesta #5 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
En línea

Futuro Sysadmin
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: background imagen en header
« Respuesta #6 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
En línea

Thryks

Desconectado Desconectado

Mensajes: 112



Ver Perfil
Re: background imagen en header
« Respuesta #7 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.
En línea

Futuro Sysadmin
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
(resuelto)Proyecto robotica[cam - imagen]
Programación Visual Basic
LixKeÜ 4 3,180 Último mensaje 4 Junio 2009, 02:14 am
por LixKeÜ
Problemas con warzone imagen sombra. [RESUELTO]
GNU/Linux
portaro 1 1,991 Último mensaje 12 Mayo 2012, 23:02 pm
por portaro
Guardar imagen modificada de un picturebox (resuelto)
.NET (C#, VB.NET, ASP)
rchrd 2 5,356 Último mensaje 25 Abril 2014, 19:47 pm
por rchrd
[Resuelto] Cuantas etiquetas header se puede tener?
Desarrollo Web
ccrunch 2 2,196 Último mensaje 12 Septiembre 2015, 16:34 pm
por ccrunch
¿Porque en el background-size:cover, se ve la imagen grande?
Desarrollo Web
Drakaris 0 1,666 Último mensaje 23 Febrero 2018, 16:18 pm
por Drakaris
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines