Texto con Fondo

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Como poner Fondo a un texto</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="contenedor">
        <h2>SLee Dw</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus adipisci aut odit molestiae! Voluptas dolorum saepe magnam, voluptates laborum ratione asperiores. Incidunt numquam quisquam consequuntur amet porro consequatur, explicabo voluptas, ipsa quas, nulla eius fugit cupiditate facere, totam unde iusto.</p>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Lobster|Montserrat&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-family: 'Lobster', cursive;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15em;
}
.contenedor{
    width: 100%;
    max-width: 600px;
    text-align: center;
}
.contenedor h2{
    font-size: 100px;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-image: url(https://1000sitiosquever.com/public/images/supima-23-las-10-playas-mas-bellas-del-mundo-o-casi.IFV.png);
    margin-bottom: 20px;
    background-attachment: fixed;
}
.contenedor p{
    line-height: 1.5;
    color: #7a7a7a;
}
@media only screen and (min-width:320px) and (max-width:768px){
    body{
        margin-bottom: 10em;
    }
    .contenedor{
    width: 95%;
}
    .contenedor h2{
        font-size: 70px;
    }
}