como lograr estos 2 diseños con css

[xfxstudios]

Prueba asi:

Código HTML:

<style>
    .primero{
        width:300px;
        height:180px;
        padding-bottom:15px;
        position: absolute;
        background-image : url(https://upload.wikimedia.org/wikipedia/commons/b/bc/Atardeceres_Pampeano.jpg);
        background-size:cover;
        background-position:center;
        background-color:#ff0080;
    }
    .segundo{
        width:90%;
        height:90%;
        color:#ffffff;
        position:relative;
        background-color:#333333;
        margin-left:auto;
        margin-right:auto;
    }
</style>
<div class="primero">
    <div class="segundo">
        <p>Hola</p>
    </div>
</div>
 

Ver Muestra