CSS - Poner una imagen en el header y el menus enciama centrado

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 15 puestos en CSS (en relación al último mes)
Gráfica de CSS

Poner una imagen en el header y el menus enciama centrado

Publicado por Jordi (3 intervenciones) el 17/11/2020 08:21:34
Buenos días,

Tengo que poner una imagen de fondo en el <header> y justo encima el menú, centrado pero no lo consigo, hasta ahora esto es lo que he hecho.

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="css/estilos.css">
    <title>WEB</title>
    </head>
    <body>
        <header>
        <h1 class="cabezera"><span>la Web titulo</span></h1>
        <nav class="menu">
        <ul>
            <il>menu1</il>
            <il>menu2</il>
            <il>menu3</il>
            <il>menu4</il>
            <il>menu5</il>
        </ul>
        </nav>
        </header>
    </body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{
    margin: 0px;
}
 
header h1 {
    background: #3789C8 url(../img/cabecera.jpg) center center no-repeat;
    background-size: cover;
    padding: 100px 70px 70px;
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
}
 
header h1 span {
    padding: 30px 0;
    display: block;
	color: #ffffff;
}

Debería quedar algo como la imagen adjunta.

Gracias
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner una imagen en el header y el menus enciama centrado

Publicado por joel (252 intervenciones) el 17/11/2020 10:08:03
Hola, Jordi, simplemente añadiendo un div debajo del menú con un background seria suficiente, no?
algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="css/estilos.css">
    <title>WEB</title>
    </head>
    <body>
        <header>
        <h1 class="cabezera"><span>la Web titulo</span></h1>
        <nav class="menu">
            <ul>
                <il>menu1</il>
                <il>menu2</il>
                <il>menu3</il>
                <il>menu4</il>
                <il>menu5</il>
            </ul>
        </nav>
        <div id="imagen"></div>
        </header>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body{
    margin: 0px;
}
 
header h1 {
    background: #3789C8 url(../img/cabecera.jpg) center center no-repeat;
    background-size: cover;
    padding: 100px 70px 70px;
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
}
 
header h1 span {
    padding: 30px 0;
    display: block;
	color: #ffffff;
}
 
#imagen {
    background:url(imagen.jpg);
    width:100%;
    height:30px;
}

Es esto lo que necesitas? una imagen debajo del menú?
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

Poner una imagen en el header y el menus enciama centrado

Publicado por Jordi (3 intervenciones) el 17/11/2020 11:11:06
Hola Joel,

Muchas gracias, me ha funcionado.

Gracias
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