header with a background
NOTE: If you are making a sidebar layout, skip this tutorial and go to http://www.livejournal.com/users/carriep63_stuff/14889.html OR http://www.livejournal.com/users/everything_lj/3804169.html.
Also note that you must use the complete override for this to work correctly. If you leave out parts of it, it will not work right.
NOTE 2: This override does not work if you have the navigation strip enabled on your journal. Adding
#lj_controlstrip_poweredby{
display:none;
}
to your *_HEAD should fix it. Also note that this override does not work with a Plus account.
Since x_jevousaime wrote a tutorial on how to add a header to your journal, I thought I would write one on how to add both a header and a background. If you just want the header, then check out her lovely tutorial here. Note that this is only known to work with Generator.
However, if you want a header and a background, then merge the following codes into your GLOBAL_HEAD overrides:
GLOBAL_HEAD<=
<=GLOBAL_HEAD
Legend:
background-color: black;
This is the background that will show while your background is loading, or if your background image does not cover the whole window.
background-image: url(http://urltoyourbackground);
The background image url goes here.
background-repeat: repeat;
If you want your background to have a tiled effect, then make leave this as it if. If you don't want your image to be tiled, then change this to no-repeat.
background-attachment: fixed;
This means that your background will not scroll with the entries. If you want it to scroll, then change this to scroll.
background-position: top left;
This is where you can position your background as you please.
background-image: url(http://urltoyourheader)
This is the url to your header image.
background-repeat: no-repeat;
You likely won't want your header to repeat, so leave this as it is.
background-position: top center;
This positions your header image.
padding-top:300;
This sets the height of the space above your entries, so that the entries do not overlap your image. Set this number to the height of your banner + 10.
div table { width: 640;
This sets the width of your entries, so that they're the same width as your banner. Set this to the width of your header.
NOTE: In order for your entries to be centered in a non-Internet Explorer browser (such as Firefox), you will need to add the following override:
table {
width: 640px;
margin-left: auto;
margin-right: auto;
}
/* do NOT change these numbers */
table table {
width: 100%;
margin:0; ;
}
table table table {
width: auto;
}
If you want the entries to be on one side or the other, change the margin-left and margin-right to numbers.
Original post located at http://www.livejournal.com/community/overridehelp/312794.html, posted by euterpeslullaby.