Cascading Style Sheets 3.0 Tutorial

Background Images

Background images show beneath the document's content. The background-image property and the url() function value as well as the background-repeat, background-position and background-attachment properties are needed.

body {
	background-image: url('logo.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-attachment: fixed;
	max-width: 600px;
}

Click here to see this code in action. When specifying a background image for the <body> tag, specify either the fixed or scroll value for the background-attachment property.

Specify a value of 0% 0% to the background-position property to make the image start in the left top. Specify a value of 100% 100% to the background-position property to make the image start in the bottom right. Specify a value of 50% 50% to the background-position property to make the image start in the center center.

#main {
	height: 200px;
	padding: 10px;
	overflow: auto;
	background-image: url('woodback.jpg');
	background-repeat: no-repeat;
	background-position: /*<select from below>*/;
	background-size: /*<select from below>*/;
}

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

#main {
	padding: 10px;
	background-color: #fff;
	background-image: url('leaveslefttop.png'), url('leavesrightbot.png');
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
}

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

#main {
	height: 200px;
	padding: 10px;
	overflow: auto;
	background-color: #ccc;
	background-image: url('logo.png');
	background-repeat: no-repeat;
	background-position: 0% 0%;
}

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

Specify the value of local for the background-attachment property to have the image scroll with the rest of a box's contents such as the contents of a <div>.

#main {
	height: 200px;
	padding: 10px;
	overflow: auto;
	background-color: #ccc;
	background-image: url('logo.png');
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: local;
}

Document Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

<< < [Page 12 of 15] > >>