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
Saturday, October 28, 2006
Subscribe to:
Post Comments (Atom)
5 comments:
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;)
Thanks Paul! I will try this. Cheers, Heather
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.
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.
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
Post a Comment