(no subject)
Semitransparent
Journal Entries Tutorial
or in other words, from this to this:
# requirements
- free account (a paid account isn't necessary)
- your favourite image editing program (here i used photoshop 7)
- a source background image
- web hosting for your background images.
# important!
the css used in this tutorial is part of the css standard but is not supported by Microsoft Internet Explorer under Windows. It does however work in Mozilla-based browsers such as Firefox and Netscape, and also in Safari and Microsoft Internet Explorer under Mac OS. therefore not all your visitors may see the desired effect.
# how to do it
firstly, you need your two background images. for this tutorial i used a photo of my home town, aberystwyth - but you can use any background image you want. open it in your image editor.
now we need to resize the image to fit the window (skip this step if you're using a tiled background). browser windows vary so we can only really guess here, but a good "guesstimate" for a browser at 1024x768 resolution would be about 1000x610 pixels. save a copy of this.
next we need to create the "faded" version of the image. use the saturation and lightness (or brightness and contrast) tools in your image editor to achieve this. save a seperate copy of this alongside the other background image. (for this, mine are called aber-strong.jpg and aber-pale.jpg.
finally, upload both of these images to your webspace. note that as with any livejournal backgrounds, the host must allow hotlinking.
now for the overrides. edit the highlighted parts of the following code to include the location of your images, and insert the block of code into your overrides (http://www.livejournal.com/modify.bml).
GLOBAL_HEAD<=
<=GLOBAL_HEAD
# how it works
this effect, explained in more depth here, is created by using two fixed background images - one image for the background of the page, and a lighter image for the content boxes. as both are fixed with respect to the window, both images always overlap perfectly. please note that this tutorial involves editing your GLOBAL_HEAD overrides. if you already have GLOBAL_HEAD overrides set, please see howto for a guide on how to merge your GLOBAL_HEAD overrides.
# credits
# contact, etc
please feel free to link to this, tell your friends about it, whatever. just don't repost it anywhere or i'll poke you in the eye. copyright (onthestreets). feel free to email me with any problems, questions, suggestions, or whatever - but i can't guarantee a response.
add this tutorial to your memories: click here :)