Skip to main content

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


ArtPropelled said…
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.

Popular posts from this blog

Cat Ear Mites

Brown gunge. Yes, I know this is a ferret! It does show the build up of dark brown to black ear wax caused by the presence of the cat ear mites in the outer ear canal. This parasite is not restricted to the domestic cat, which makes this photo valid and a useful illustration (I was unable to find a suitable photo of a cat with the condition). Photo Stacy Lynn Baum under a creative commons license. Ear mites (minute crab like creatures) are one of the causes of inflammation of the outer ear canal (scientific term for this inflammation is Otitis externa ). The outer ear canal is the tube that runs from outside to the ear drum (the pathway for the reception of sound), which can be seen when looking at the ear. Otitis externa affects humans and often swimmers as it is called "swimmer's ear" in humans. This YouTube video show ear mites under a microscope. They are not actually in the ear in this video. There are many possible causes of Otitis externa in c

Feline Mange

I'll write about three types of feline mange (a) feline scabies or head mange (b) demodectic mange and (c) sarcoptic mange. The source material is from Cat Owner's Home Veterinary Handbook - the best on the market . Generalised feline mange? Puerto Rico - Photo by Gotham City Lost And Found Feline Scabies - head mange Head mange or feline scabies, is a fairly rare condition in cats, which is caused by the Notoedres mite (head mite) that only reproduces on cats. The female mites burrow a few millimeters (that is a lot) into the skin around the head, and neck to lay eggs, which hatch and lay their own eggs. Their presence and activities causes intense itching that in turn causes the cat to scratch. The scratching will obviously be noticed and it will cause the skin to become red, scratched and worse infected. Symptoms: hair loss and scabs, thick wrinkled skin and grey/yellow crusts form plus the symptoms of scratching. Feline mange (head mange) is contagious and tr

Cat Anatomy

Cat Anatomy - Photo by Curious Expeditions . The picture above was taken at Wax Anatomical Models at La Specola in Florence, Italy. The photograph is published under a creative commons license kindly granted by the photographer. I am sorry if it is a bit gruesome. It is pretty well all I could find as an illustration that was licensed for publication. Cat Anatomy is a very wide ranging subject. The anatomy of a cat is very similar to human anatomy. If you were writing a biology book for students of biology you would go through every part of the a cat's anatomy in some detail. It would be similar to writing a book about the human anatomy. It would be a thick book and pretty boring for your average internet surfer. So, how do you limit such a big subject and make this post meaningful? The answer I think lies in doing two things: Having a quick general look at cat anatomy - an overview and; Focusing on the areas of cat anatomy that are particular to the cat and of parti