Saturday, October 28, 2006

Adding Photo to Header

I would like to add a photo to the right side of my header but I'm not sure how to do that & a bit scared I'll end of doing something wrong to my template. Any suggestions?
Thanks, Heather

This Post was written by Heather from The Culinary Chase


paul said...

Adding an image to the background of your header without messing with your template is easy, in your style sheet, you specific the image's url, position and whether it repeats in the background. So add the following to your #header

background: url("YOURIMAGENAME.jpg");
background-position: right top;
background-repeat: no-repeat;

Of course replace your image's name. No matter what your image's size, it will fit cropped neatly inside the header box. You can jam the blog title and the description over by using the margin style. Use 4 values in the margin stlye, it's less confusing:
#blog-title {
margin:5px 500px 0px 5px;
- the values correspond to the margins in clockwise order - top right bottom and left. So that margin will be jammed 500pixels to the right.

Now the image doesn't appear inside the header's thin white interior box (which are slightly screwed up in Safari). Easiest solution without messing with the template is to remove them. Change the border widths to 0 in the blog-title and #description ( border 0px AND border-width: 0;)

The Culinary Chase said...

Thanks Paul! I will try this. Cheers, Heather

Kalyn said...

Paul, thanks for always being so generous with your input here. Even though I'm lucky enough to have my own techie (my brother) who does this stuff for me, I love learning how to do it myself if I needed to.

Trig said...

Heather - whatever changes you make to your template there is always a risk that you cause irreversible damage. So, before you do anything else, open an application you are comfortable with such as MS Word or WordPad, copy your entire template and paste into a file. Save this as "mytemplateddmmyy" and keep several dated versions as you make changes, so that you can unwind back to a working version if a problem only manifests itself later on. Good luck.

The Culinary Chase said...

Thanks for that Trig! Before seeing your comment I had planned to create a new blog (dummy test site). So I'll definitely back up my original template. Cheers! Heather