1

Estoy buscando una forma de colocar un elemento que se vea de la siguiente manera:

resultado esperado

Esto es lo que llevo hasta ahora:

.section-mobile {
    /* background: #F8F9FA; */
    background: #004987;
}

.imagen-data .img-mobile {
    position: relative;
    bottom: -200px;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
    
    <!-- css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="estilos.css">

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <title>Data Planning</title>
</head>
<body>
    <section class="section-mobile d-none d-sm-block d-md-block d-lg-block p-5">
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-9 imagen-data">
                    <img src="https://placehold.it/400x400" alt="" class="img-mobile">
                </div>
            </div>
        </div>
    </section>
</body>
</html>

2
  • No entiendo la diferencia entre la foto y el codigo.
    – alanfcm
    Commented el 15 ago. 2019 a las 14:37
  • @alanfcm en la foto, el cuadrado esta picado por la mitad por asi decirlo, significa que se ubica solo en la parte azul, y en el codigo, se ubica tanto en la parte azul como en la blanca Commented el 15 ago. 2019 a las 14:39

1 respuesta 1

2

Lo que buscas es overflow: hidden; asi:

.section-mobile {
    /* background: #F8F9FA; */
    background: #004987;
    overflow: hidden;
}

.imagen-data .img-mobile {
    position: relative;
    bottom: -200px;   
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&display=swap" rel="stylesheet">
    
    <!-- css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="estilos.css">

    <!-- scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <title>Data Planning</title>
</head>
<body>
    <section class="section-mobile d-none d-sm-block d-md-block d-lg-block p-5">
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="col-md-12 col-lg-9 imagen-data">
                    <img src="https://placehold.it/400x400" alt="" class="img-mobile">
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Tu Respuesta

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

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