HTML Dog
Skip to navigation

Background attachment

How a background behaves with scrolling content.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>background-attachment</title>
	<style>
		body {
			font: 20px courier;
			background: #c72 url("/examples/images/opacityBg.gif");
			background-attachment: fixed;
			color: #fff;
			margin: 20px;
			text-align: center;
		}
		article {
			max-width: 500px;
			margin: 0 auto;
		}
		h1 {
			font-size: 30px;
			margin: 80px 0;
		}
		h2 {
			font-size: 20px;
		}
		code {
			background: rgba(0,0,0,.25);
			padding: 0 15px 2px;
		}
	
		p {
			background-image: url("/examples/images/x.png");
			height: 300px;
			padding: 20px;
			margin-bottom: 80px;
			overflow: auto;
		}

		#p1 {
			background-attachment: scroll;
		}
		#p2 {
			background-attachment: fixed;
		}
		#p3 {
			background-attachment: local;
		}

		#htmldog a {
			display: block;
			height: 300px;
			background: transparent url("http://www.htmldog.com//badge1.gif") center no-repeat;
			text-indent: -999em;
		}
	</style>
</head>
<body>
	<article>
		<h1><code>background-attachment</code></h1>

		<h2><code>background-attachment: scroll;</code></h2>
		<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>

		<h2><code>background-attachment: fixed;</code></h2>
		<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>

		<h2><code>background-attachment: local;</code></h2>
		<p id="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, nulla id efficitur condimentum, nisi eros rutrum arcu, vitae egestas tortor arcu eget lacus. Maecenas velit neque, blandit fringilla fringilla vitae, posuere eu enim. In hac habitasse platea dictumst. Praesent pretium ante nec massa sollicitudin rhoncus. Sed laoreet metus quam, vel congue nisi dictum pellentesque. Curabitur egestas augue nulla, sit amet mattis turpis finibus vitae. Duis varius neque sed venenatis aliquet.</p>

		<!-- Link back to HTML Dog: -->
		<p id="htmldog"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
	</article>
</body>
</html>

Output

View original