Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/image.md

Created September 16, 2020 22:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/d148bef4ee72ff47ca32c00b21b317ec to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/d148bef4ee72ff47ca32c00b21b317ec to your computer and use it in GitHub Desktop.
Download ZIP
Layered background image effects and clipping
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Layering Background Effects</title>
<!-- import Raleway font from google fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;700;800&display=swap"
rel="stylesheet"
/>
<style>
/* beach image - https://unsplash.com/photos/GeGqpdduiaQ */
html {
font-size: 20px;
font-family: "Raleway", sans-serif;
}
header {
min-height: 8rem;
padding: 0;
}
header > h1 {
font-size: 7rem;
line-height: 8rem;
text-align: center;
letter-spacing: 0.5rem;
font-weight: 800;
}
.v1 {
background-image: url(./img/splatter-1.png), url(./img/beach.jpg);
background-position: center, center;
background-size: cover, cover;
}
.v1 > h1 {
color: white;
}
.v2 {
background-color: black;
}
.v2 > h1 {
background-image: url(./img/splatter-1.png), url(./img/beach.jpg);
background-position: center, center;
background-size: cover, cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<header class="v1">
<h1>SURFIN&apos;</h1>
</header>
<header class="v2">
<h1>SURFIN&apos;</h1>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment