0

Estoy tratando de hacer el cabecero de mi pagina web pero la propiedad background-size no me cubre todo el espacio que deseo ya intente de varias formas.

Código:

.contabilidad{
    background-image: url(../../assets/Contabilidad.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 400px;
}

Resultado

1
  • Hola @Christopher. Si funciona tu código. Este tipo de problemas suelen ocurrir cuando hay una regla CSS interfiriendo en tu elemento HTML; en este caso, la anchura. el 1 abr. 2021 a las 20:45

1 respuesta 1

0

De esta manera puedes obtener que tu imagen ocupe el ancho de la página y que sigas manteniendo tu texto en la forma como la tenías. Te dejo el ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
        }

        .contabilidad {
            background-image: url(../../assets/Contabilidad.jpeg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            height: 400px;
            border-top: 5px solid green;
        }

        .contabilidad > img {
            width: 100%;
        }

        .texto {
            position: absolute;
            margin: 0;
            color: white;
            width: 100%;
            text-align: center;
            font-size: 3rem;
        }
    </style>
    <title>Contabilidad</title>
</head>
<body>
    <div class="contabilidad">
        <p class="texto">Hola</p>
        <img src="contabilidad.png" alt="">
    </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.