”, as I found so many wired things when using CSS, and I think this book may be helpful for me. and I post some of patterns in the book while learning.Background pattern
In fact this is a built in property of CSS
, which is used to set the background image of an HTML element.for example:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
div {
background : url(corner.jpg) no-repeat;
width : 220px;
height : 220px;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<div></div>
</body>
it’s very simple, and most of coders known it.
Related CSS Properties
I just want to introduce several CSS properties that related to background.
background is a shorthand of a list of ordered properties, they are:
- background-color : set the color of background
- background-image : set background image, which is used in this pattern
- background-repeat : by default, the background image is repeated to fill the whole HTML element, but you can control how to repeat or do not repeat, it has three values: repeat-x(horizontal), repeat-y(vertical), no-repeat
- background-attachment : sets whether a background image is fixed or scrolls with the rest of the page. so if you set it to scroll, then the background image may be not shown when you scroll down the page, but if it’s fixed, then the image always shown at the original place, no matter how to scroll
- background-position : the starting position of background image, you may use keywords(left, right, center, top, bottom) or integer or % to specify the position.
- it’s recommended to test the every pattern in the book, and you can use firebug
(firefox
add-on) to disable a property or add new CSS property, the tool is much helpful, no need to switch between the CSS/HTML file and browser, just test what you want on browser first, when everything is OK, copy the CSS back to file.
Posts
No comments:
Post a Comment