Time mystery (hourglass) wrote in customization, @ 2003-09-10 23:20:00

Further customizing the background image
Apart from the background properties which you can define from the override provided in FAQ 49: How do I add a background image?, there are several other properties you can assign to your background image.




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.