howto_user (howto_user) wrote in s2howto,

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("") !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() {
    <style type="text/css">
    CSS information

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.

Tags: - all styles, all accounts, background images, free accounts

Comments for this post were disabled by the author