| Further customizing the background image |
[Dec. 27th, 2003|08:04 am] |
Apart from the background properties which you can define from the override provided in FAQ 48: How do I add a background image?, there are several other properties you can assign to your background imarge.
GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-color: #000000 !important;
background-image: url(http://www.your-website.com/image.jpg) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center top !important;
}
-->
</style>
<=GLOBAL_HEAD
What the properties mean:
Background color
Default property: No color - will display color defined in Modify Journal section.
The best way to define the color would be to use hex codes. A hexadecimal codes chart is available here if you need the hex codes for colors.
Background image
Default property: None.
The URL highlighted in the example should be replaced with the URL you have hosted at an external webhost which allows remote loading.
Background repeat
Default property: Repeat (Known as tiling)
The example has defined a no-repeat property, where the background will only be displayed once. The properties available are:
| repeat | | image is tiled horizontally and vertically |
| no-repeat | | image is not repeated |
| repeat-x | | image is repeated horizontally |
| repeat-y | | image is repeated vertically |
Background scrolling
Default property: Scroll.
The example has defined this as fixed. The properties available are:
| scroll | | background image scrolls with content |
| fixed | | background image does not scroll with content |
Background position
Default property: 0% 0%
The first value is for the horizontal, the second is for the veritical. If only one value is given and it is a percentage or pixel value (as in the example above) than it will be for the horizontal, left side. In the sample code given above the background position is simply 2%. This puts the background 2% from the left and 50% from the top. Even though the default is 0% 0%, if one element is given and the other isn't, the one that's not given becomes 50%.
The example has defined the background image to display at the top center of the page. The properties available are:
| percentage | | one or two percentage values |
| length | | one or two length values |
| left | | horizontal alignment is at the left |
| center | | horizontal alignment is centered |
| right | | horizontal alignment is at the right |
| top | | vertical alignment is at the top |
| center | | vertical alignment is at the center |
| bottom | | vertical alignment is at the bottom |
Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information is available here.
[originally contributed by  macheide</span> and janinedog</span> in </a></b></a> |
|
|
