Creating a Fixed and Visible background

Aug 06, 2005 17:14

I know some people like having a background image that stays in place, and is visible through the entries/comments/sideboxes, so here is a short tutorial on how to get it. I modified this community's background using these methods as an example to look at.

This tutorial will work for both paid and free accounts, and works in both Firefox/Mozilla and Internet Explorer browsers.

Tutorial:

From the Customize Page, under Custom Options, under the Images tab, the option "Background Image", specify the URL for the picture you would like to place as your background. This will display a background, but it will scroll with the page and it will repeat in both directions.

If you would like to see the LiveJournal texturised backgrounds in a cool tool that you can use to change the colours, see this page. You can specify the hex codes for the foreground colours and background colours as colours one and two respectively, and it will change all the colours of the images. As an example, I modified this community so the background image is the first picture on that page where colour one is "FFFFFF" and colour two is "314667". When you are happy with the colourisation of a particular image, you can copy the image's location and use that as your image URL. Because the images are hosted on LiveJournal's servers, there is no need to copy the image to your own place.

In the Wizard, under the Layout tag, the option "Custom Stylesheet Information", put the following:   
body { background-attachment: fixed; background-repeat: no-repeat; }
.entryHolder, .commentHolder, .sidebox { background: transparent; }The first line above will make the background image fixed with no repeating. The second line will make the entries, comments and sideboxes transparent so that you can see the image you entered above.

You can change the repeating styles by replacing the "no-repeat" in the above with "repeat-x" if you want the image repeating horizontally only, "repeat-y" if you want the image repeating vertically only, and "repeat" if you want the image repeating in both directions. You can also get the image to scroll with the rest of the page instead of staying in place by replacing the "fixed" above with "scroll". As an example of a page to look at, I used the "fixed" and "repeat" options on this community.

Enjoy!

background, tutorial

Previous post Next post
Up