Entry tags:

header image, s2

[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.