Fitting the Header Picture into Border

Fitting the header picture into the border is important and I fairly often see uploaded pictures on the most popular template, Minima, with the horizontal edges of the picture out of alignment with the double border that is automatically produced for the header. This is the procedure I use for ensuring that the picture that you upload to the header (in place of the text) fits perfectly into the double border. These are the steps:

  1. Go to the “Layout” tab of your blog. You can get there via “customize” in the navbar at the top of the page when viewing the blog or via “dashboard” and then click “Layout”.
  2. Click on Header “Edit” (the block at the top of the template).
  3. Upload your pre-prepared picture from your computer or internet. It should be bigger than the border size but click on the check button, “Shrink to fit” and the radio button, “Instead of title and description”.
  4. Save.
  5. Your image will be up as the header. Vertically it should be aligned. Horizontally you will be very fortunate if the edges of the image exactly fit the double borders of the Minima header or the header of other templates. To fit snugly do this:
  6. Click on “Edit HTML” tab.
  7. Open the search box by keying “Ctrl F”
  8. Paste in this code into the box: header-wrapper
  9. You will be taken to the correct part of the template.
  10. The line below #header-wrapper { will be this: width:684px; although the number will be different as in this example it has been changed and this is what you will do next.
  11. Change the number of pixels (px) to a lower or higher number depending on whether your image overlaps the border (make the number higher) or is well inside the border (make the number lower). Do this in smallish increments and click the preview button to see the outcome.
  12. Keep adjusting until the image exactly fits the border.
  13. Save the template. Always preview your work before saving it and you should download the template to your desktop before doing this procedure although this is a very simple procedure that will not “hurt” the template if you don’t do it correctly.

Fitting the Header Picture into the Border is easy and creates a nice clean look.

From Fitting the Header Picture into Border to Home Page

1 comment:

  1. Your instructions are so clear I began to think I wasn't as computer illiterate as I thought ..... but no matter what I do to the header-wrapper (ie changing the pixel width) my photo will not fit. It just stays backed up in one corner so I've now deleted the photo and have a plain title. I am obviouysly doing something wrong but can't work out what exactly.

    ReplyDelete

Your comments are always welcome.

Featured post

Story of Logan - werewolf street cat - is full of sadness, love, joy and more sadness

Logan was a rescue cat. He was saved from a very harsh life on the street. We are not told where or I can't find out where. He became fa...

Popular Posts