1
2
3
4
5

blog tutorial : body overlap the header when you scroll down


gif preview // { right click for copy }

tutorial yang dinanti2 kan sudah tiba haha . so its been a long time since the last time i give u guys blog related tutorial rite ?  get help from senpai on tumblr // i even ask them on how to do  this sobs so  the code is mine ; susah nak buat and faham menatang ni  sebab if salah sikit type code tu , hancur satu blog . lol lagi2 code { z-index } srsly haih stop with my rant now anyway lets just start 


// full width version //

1. copy this code .

#header {
width:100%;
height: 300px;
position: absolute;
left: 0px;
margin-top: -10px;
z-index: 3;
background-color:#222222;
background-repeat:repeat;
background-attachment:fixed;
background-image:url('http://i.imgur.com/jgyjVkv.png');
}



2. padam semua kod header yg sebelum ni and paste code baru kat atas tu. { sebelum </style> }

3. copy code dekat bawah and paste { selepas </style> }


<div id="header">
</div>


4. carik code <table style=" and paste code margin ni selepas je code table tu .

margin-top: 280px;


5. preview > save



// specific witdh version //

#header {
width:850px;
height: 300px;
margin:auto;
margin-top: -10px;
z-index: 3;
background-position: top;
background-color:#222222;
background-attachment:fixed;
background-repeat:repeat;
background-image:url('http://i.imgur.com/jgyjVkv.png');
text-align: center;}


-- then ulang je step seterusnya sama macam kat atas .

bold : change the code with your own

- and here are some full width header that i edit ; click on the image if u want to use it . please use it well ok. thank you





















Monday, January 6, 2014 • 8:59 PM



Intro

Just a girl in a big world. Welcome to mine, don't forget to take off your shoes :)




archive



credit