Me, my life, my interests

Getting an Image in the K2 header

Matthew Stinson wrote some time ago about including images in the K2 header. Although the notes are for an older version of both WordPress and K2, this will help me get a better understanding of how this all works.

To add a banner graphic you first need a banner of appropriate size (760 x 200 is the default, but you can go bigger/smaller according to your needs so long as you adjust the rest of K2 appropriately). When customizing K2’s CSS you should use the K2 styles CSS rather than editing the K2 CSS directly, as any custom styles you create will automatically overwrite K2’s styles without altering core files. The banner you want should probably be placed in


that is, an images folder inside the styles folder.

The CSS code to include a banner in your custom style looks like this (edit the all-caps sections to match your materials):

#header { /* Contains the H1 and menu */ background: url(images/YOURBANNERGRAPHIC.FORMAT) no-repeat; background-color: #CHOOSE A COLOR THAT MATCHES YOUR BANNER GRAPHIC; }

Edit your custom CSS file (make a copy of sample.css and edit that copy) and upload it to the styles folder. Then, upload the banner graphic to the images subfolder mentioned above. Finally, access K2 options in WordPress and select your custom style. Load your blog site and the banner should appear.

lets see how I go...