[s2 ALL] Adding a header image with CSS

[carriep63]

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.