Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/css-backgrounds.html

Created July 25, 2018 21:15
Show Gist options
  • Save prof3ssorSt3v3/f51ae07fae761eeebab503d541f85da4 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/f51ae07fae761eeebab503d541f85da4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-backgrounds.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Backgrounds</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css" />
<!--
MDN background reference
https://developer.mozilla.org/en-US/docs/Web/CSS/background
-->
<style>
p{
/**************************************************
background-color: cornflowerblue; -1st in last layer
background-image: url(archer-bob.jpg); - 0|1 instance
background-position: center center; - 0|1 instance
- bottom left right top
- horizontal vertical
background-size: cover; - 0|1 instance
- immediately after position
- position / size
- cover | contain | auto
background-repeat: no-repeat; - 0|1 instance
- repeat-x repeat-y repeat
background-attachment: fixed; - 0|1 instance
- local scroll
background-origin: border-box; - comes first
- padding-box content-box
background-clip: content-box; - comes second
- commas between layers
**************************************************/
}
header{
min-height: 10rem;
padding: 1rem;
border-top: 10px dashed #333;
border-bottom: 10px dashed #333;
background: cornflowerblue url(archer-bob.jpg) left top / contain no-repeat fixed border-box border-box;
}
header>h1{
text-shadow: 2px 2px 2px #eee;
}
</style>
</head>
<body>
<header>
<h1>CSS Backgrounds</h1>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment