More on Background Images

Jun 10, 2002 03:22


LiveJournal's FAQ 97 describes the basics of using a global head override to specify a background image that will display on all of the customizable views of a livejournal. That FAQ also provides the style code that can be used to specify that the background image remains fixed in place while remaining content scrolls.
Those two background attributes, along with other background attributes, can be combined into a single style property, as in the following example--
GLOBAL_HEAD<=

<=GLOBAL_HEAD

These elements must be specified in the order shown here. One or more of the elements can be deleted, in which case the default for that element would apply, but all remaining elements must remain in the established order.
  • Background Color--Default: transparent. [Note: although the stylesheet default is transparency for the background color, the color selected for the body background under the LiveJournal color scheme will actually display if no color is provided in this property.]

    Choice of background color can be specified in the portion shown with yellow background in the override example. The specification can use either--(a) the recognized name of the color, as was done in this override example; (b) the hex code for the color; or (c) the decimal RGB number for the color.

    Even if a background image is meant to occupy the full background, it is usually a good idea to specify a background color--(a) to fill the background space while the background image is loading; and (b) to provide appropriate background if the background image fails to load (for example, because of an external server problem).


  • Background Image--Default: none. The URL shown in the sample override with orange background should be changed to the URL for the image intended to be used for the background.


  • Background Repeat--Default: repeat. For the segment of the example override shown with light blue background, we have opted to repeat the image vertically, but not horizontally. The choices that can be made for the repeat element 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 Attachment--Default: scroll. The options for this element, indicated in the sample override with the light green background, are--

    scroll background image scrolls with content fixed background image does not scroll with content

  • Background Position--Default: 0% 0%. The element that specifies the position of the image comes last, indicated in the sample code with a light pink background. The first value is for the horizontal, the second is for the vertical. If only one value is given and it is a percentage or pixel value (as in the example above) then 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%.
    Basic options for this element 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

Variable Reference:GLOBAL_HEAD Additional References:
  • Merging Your GLOBAL_HEAD
  • What are overrides? How do they work?

  • Only one override is permitted for each specific override block.
    If you are currently using a GLOBAL_HEAD override, then that override would need to be revised to reflect changes presented here or otherwise merged.
    contributed by macheide and janinedog

    - all styles, background images

    Previous post Next post
    Up