Thursday, August 20, 2009

Adding an image on top of the blog

Adding an image to the top of the blog is very easy.All you have to do is edit your html a bit.Minima template is the best template to try out all your experiments.

  • First select the image you want to put as your header.Note that it fits in 660 pixcel width,else it won't fit correctly in your header.In later posts I will explain how to use width greater than 660PX.Your height can be as big or small as you want.
  • Then go to Layout->Edit HTML.Find the code under the Header section and edit it with the below code

#header {
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url('http://your image.jpg')no-repeat center;
text-align: center;

  • If you are wondering what is given in this code...don't worry, I am here to explain it for you!!!
  • I have given Width as 660PX (PX means pixel).
  • Next Height you can give anything of your choice...first give 300 and see,you will get an idea of how your image looks.Then alter the value depending on how your image is seen on the screen.
  • Next what mainly you have to notice is the border.Here I have given 1PX.But sometimes you can see that the border is popping out of your image.So change border to 0PX if you don't want that.
  • In background,you have to give the link to the image you want to put in your header.
  • And last,text-align is for aligning your heading as you like.Here I have put center.You can change it to "top left","top right" or as you want your heading to be shown.

Hope you find this post useful.If you have any doubts, you can very well write to me.

Happy Blogging,

No comments: