Carrie (carriep63) wrote in everything_lj,
Carrie
carriep63
everything_lj

[s2 ALL] Adding a header image with CSS

Many S2 styles will let you add a header image by using the customization wizard, but if you are already using CSS overrides, you may want to add a header image with CSS.

The following tutorial will show you how to add a header image to your S2 layout using CSS. Note: there is usually more than one way to add a header image with CSS. For the purpose of this tutorial, I have chosen the way I think is the easiest to explain.


How to add CSS to your layout:
1. go to the customization wizard
2. Click on "customize your theme"
3. choose "custom css"
4. paste codes into "custom stylesheet" box
5. save



There are a few changes you will have to make to the codes in order for your header image to show properly.

background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;

1. #000000 = Change to your own background color, or delete for no color.
2. http://www.your-header-image.jpg = change to your own image link
3. 300px = Change to the height of your image (or larger).




3 Column
A novel conundrum
A study gesture
Bloggish
Clean and Simple
Classic
Component
Cuteness Attack
Dear Diary
Digital Multiplex
Disjointed
Expressive
Flexible Squares
Generator
Haven
Magazine
Mixit
Nebula
Notepad
Opal
Punquin Elegant
Quite Lickable
Refried Paper
Smooth Sailing
Tabular Indent
The Boxer
Tranquility II
Unearthed
Variable Flow



3 COLUMN
#container{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
}
#rightbar, #leftbar, #entries{
margin-top:300px;
}


A NOVEL CONUNDRUM
h1{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:320px;
}
body{
margin-top:0px;
}


BLOGGISH
#banner{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


CLASSIC
#whole{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


COMPONENT*
.header{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}

or

table{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}
table table{
background:none;
padding-top:0;
}


DEAR DIARY
#pagecontainer{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}
#main, #paraphernalia{
margin-top:300px;
}


DIGITAL MULTIPLEX
with title:
table#top_title{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
width:724px;
}

no title:
table#top_title{
display:none;
}
#main{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


FLEXIBLE SQUARES
.headerimage{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


GENERATOR, THE BOXER
div{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}
div div{
background:none;
padding-top:0;
}


HAVEN
table{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}
table table, .title_navigation, #footer{
background:none;
padding-top:0;
}


MIXIT*, EXPRESSIVE*, STYLE CONTEST*, TRANQUILITY II, CUTENESS ATTACK
#container{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


NEBULA
#mainContainer{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


QUITE LICKABLE
#pagecontainer{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


SMOOTH SAILING
.pageblock{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


A STURDY GESTURE, CLEAN AND SIMPLE, TABULAR INDENT, REFRIED PAPER, PUNQUIN ELEGANT, OPAL, NOTEPAD, and DISJOINTED
table{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}
table table{
background:none;
padding-top:0;
}


UNEARTHED
#Header{
background:#000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}


MAGAZINE, VARIABLE FLOW
html{
background:blue;
}
body{
background: #000000 url(http://www.your-header-image.jpg) no-repeat top center;
padding-top:300px;
}



* Some styles and themes are limited to paid or plus users only.
Tags: header image, s2
Subscribe
Comments for this post were disabled by the author