HTML - poner imagen de fondo en cabecera

 
Vista:
Imágen de perfil de Charly
Val: 41
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

poner imagen de fondo en cabecera

Publicado por Charly (17 intervenciones) el 17/05/2018 20:42:58
Estoy creando una página web y en el header quiero poner una imagen pequeña de fondo qe ocupe toda la cabecera y solo la cabecera.
He intentado varias cosas, pero por ahora solo consigo estirarla a lo ancho, pero a lo alto me rellena solo el header, pero como si el resto de la imagen estuviera debajo del body.
Además, me tapa la barra de navegación y parte del "section" que hay debajo.
Este es el estilo que tengo para la cabecera:
1
2
3
4
5
6
7
8
9
header{
	background:url(titulo.jpg) no-repeat center center fixed;
	background-size:cover;
	height:100px;
	width: 100%;
	position: absolute;
	left:0;
	top:0;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

poner imagen de fondo en cabecera

Publicado por Lopez (271 intervenciones) el 18/05/2018 04:40:01
Charly,

Estas dándole una posición absoluta al elemento header,
y este se comportara de acuerdo a ello.
Prueba removerle, y cuéntanos que tal.

1
2
3
4
5
6
7
8
header{
	background:url(titulo.jpg) no-repeat center center fixed;
	background-size:cover;
	height:100px;
	width: 100%;
 
 
}

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Charly
Val: 41
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

poner imagen de fondo en cabecera

Publicado por Charly (17 intervenciones) el 18/05/2018 11:53:43
Lo que hacia la posición absoluta era no dejarme espacio en los márgenes, pero me aparece igual que antes.
Lo que quiero es que en el header me muestre todo lo alto de la imagen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

poner imagen de fondo en cabecera

Publicado por juan jose (51 intervenciones) el 18/05/2018 22:55:20
puedes mandar una captura de lo que te pasa?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de horaciosok

poner imagen de fondo en cabecera

Publicado por horaciosok (2 intervenciones) el 18/05/2018 23:44:52
1
2
3
4
5
6
header
{
        background-position: center center;
	background-image: url(imagen);
	background-size: cover;
}


de esta forma me funciono
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

poner imagen de fondo en cabecera

Publicado por juan jose (51 intervenciones) el 19/05/2018 09:04:17
1
2
3
4
5
6
7
8
9
header{
	background:url(titulo.jpg) no-repeat center center fixed;
	background-size:cover;
	height:100px;
	width: 100%;
	position: absolute;
	left:0;
	top:0;
}

por partes aunque no se exactamente lo que quieres visualizar seguro

no hace falta una posicion absoluta para eliminar los margenes del navegador, solo es poner en el css al inicio, y debe de ser lo primero que escribas en el css

1
2
3
4
*{
margin:0;
padding:0;
}


en cuanto a la imagen, el header tiene un alto de 100px, imagino que es la altura de la imagen

1
2
3
4
5
header{
	background: red url(titulo.jpg) no-repeat center;
        height:100px;
	width: 100%;
}

si la imagen es de 2000px y quieres que se te ajuste a esos 100px


1
2
3
4
5
6
header{
	background: red url(titulo.jpg) no-repeat center;
        height:100px;
	width: 100%;
	background-size: contain;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar