Setting the Attachment for the Background
When you apply a background to an element that has a viewport(with scrollbar), you can specify how the background is attached to the content.
The background-attachment Values:
Value | Description |
---|---|
fixed | fixed to the viewport, the background doesn't move during scrolling. |
local | attached to the content, the background moves with the content when scrolled. |
scroll | fixed to the element and does not scroll with the content. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
textarea {
border: medium solid black;
background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png);
background-size: 60px 60px;
background-repeat: repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<p>
<textarea rows="8" cols="30">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</textarea>
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Background:
- Setting Element Backgrounds
- Setting the Background Color and Image
- Setting the Background Image Size
- Setting the Background Image Position
- Setting the Attachment for the Background
- Setting the Background Image Origin
- Using the background Shorthand Property
Related: