Background Images
LiveJournal's FAQ 214 describes the basics of adding a background image to your journal using S2. However, certain layouts do not support the ability to specify background image properties in the Custom Options page. In these layouts you can use a Custom CSS section of your Custom Options to enter the following code that can be used to specify that the background image remains fixed in place while remaining content scrolls, along with other background attributes.
body { background-color: cadetblue !important; background-image: url("http://www.example.com/yourimage.jpg") !important; background-repeat: repeat-y !important; background-attachment: fixed !important; background-position: 2% !important; }
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 (See here); 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 centered bottom vertical alignment is at the bottom
Once you have entered the code you wish to use for your journal, click "Save Changes".
Paid users who are using a custom layout may need to adapt this code into a print_custom_head() function instead. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.
function Page::print_custom_head() { """ """; }
Replace CSS information with the code provided earlier in the tutorial. Note that if you already have a print_custom_head function, you will need to merge the two functions together.
Originally written for S1 by arie. Adapted for S2 by legomymalfoy. Adjusted for all account types by camomiletea.