[flexible squares] Adding a Header Image
This tutorial provides a method of adding a header image in the S2 style Flexible Squares with custom CSS. Before beginning this customization, make sure you have the picture in a valid image format and uploaded to a website that allows remote loading.
To add a header image to the top of your journal, go to the Custom Options tab of the Journal Display area. You can find the option to add your CSS in the Custom CSS section.
You will need to add the following code, which will allow you to customize the size and position of your header image.
.headerimage { height: 150px; background-image: url("http://example.com/headerimage.png") !important; background-repeat: no-repeat !important; background-attachment: scroll !important; background-position: center !important; margin-bottom: 15px; }
After pasting this code, you must edit the height attribute to the height of your image.
The lines in blue above show the different CSS declarations available to customize your header image. A separate tutorial explains how you can modify each background attribute. Only the background-image: attribute is necessary, but if you choose to use any, they must be in the order shown above.
You must replace the URL in lavender with the URL of your image. Please remember that the website your image is stored on must allow remote loading to LiveJournal.
The code in green is not needed, but it does prevent your header image from directly touching the content of your LiveJournal by adding extra space. If you do decide to use it, the number 15 can be adjusted.
Click the "Save Changes" button at the bottom of the page to apply the customizations to your journal.
Additional References Why are my images not displaying? What is remote loading?
Adding header images in other styles
Contributed by deadmantalks. Some elements taken from a tutorial by phoenixdreaming and camomiletea. Adjusted for all account types by camomiletea.