Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/index.html

Last active April 15, 2023 16:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/a4e50ee4172b74dbd2685d209980a85a to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/a4e50ee4172b74dbd2685d209980a85a to your computer and use it in GitHub Desktop.
Download ZIP
Code sample for background image tints through CSS
Raw
index.html
<!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" />
<title>Tinting Images with CSS</title>
<link href="https://fonts.cdnfonts.com/css/brandon-grotesque" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('header').addEventListener('click', (ev) => {
ev.target.classList.toggle('tint');
});
});
</script>
</head>
<body>
<nav><a href="#">Things</a> | <a href="#">Stuff</a> | <a href="#">Places</a></nav>
<header>
<h1>High-Techie Tech</h1>
</header>
<main></main>
<!--
{
"id": "2",
"author": "Alejandro Escamilla",
"width": 5000,
"height": 3333,
"url": "https://unsplash.com/photos/N7XodRrbzS0",
"download_url": "https://picsum.photos/id/2/5000/3333"
}
-->
</body>
</html>
Raw
style.css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "brandon grotesque", sans-serif;
}
html {
font-weight: 300;
font-size: 20px;
}
body {
min-height: 100vh;
background-color: hsl(220, 40%, 90%);
}
nav {
padding: 1rem 4rem;
background-color: #222;
color: white;
font-size: 1.4rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav a {
color: currentColor;
text-decoration: none;
letter-spacing: 1px;
padding: 0 2rem;
}
nav a:hover {
text-decoration: underline;
color: hsl(220, 70%, 90%);
}
header {
height: 800px;
display: grid;
place-content: center;
background-image: url(https://picsum.photos/id/2/2936/1970?grayscale);
background-position: center;
background-size: cover;
}
header.tint {
background-image: linear-gradient(
180deg,
hsla(200, 60%, 50%, 0.16),
hsla(200, 50%, 30%, 0.95) 80%
),
url(https://picsum.photos/id/2/2936/1970?grayscale);
}
h1 {
font-size: 6rem;
font-weight: 300;
padding: 1rem;
color: white;
}
main {
min-height: 400px;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 3rem;
}
nav a {
font-size: 1rem;
padding: 0 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment