How to Add a Blogger Header Image That Fits Every Screen

You uploaded a header for your blog, it looked perfect on your laptop, and then you checked it on a phone: the text was cut off, the logo was tiny, or the picture had stretched into a blurry strip. A Blogger header image fails like this when its size, its file weight or the header settings do not match the template it sits in.

I customize Blogger templates for clients every week, and the header is the part people change first and get wrong most often. Here is how to size it, upload it and adjust it so it holds up on every screen.

Find your template's real header width first

There is no single correct size for a Blogger header image, because every template sets its own content width. Guessing is the root of most header problems.

To find yours, open your blog on a desktop browser, right-click the header area and choose Inspect. Hover over the header element in the panel that opens, and the browser will show its width in pixels. Common values range from about 960 to 1200 pixels for fixed-width templates. Full-width templates stretch to the browser edge, so plan for 1920 pixels.

Write the number down. Then make your image at that width, or at twice that width if you want it sharp on high-density screens like recent iPhones and most laptops.

Height matters more than people expect

A tall header pushes your first post below the fold on mobile. I aim for a height of 200 to 300 pixels at a 1200 pixel width, which is roughly a 4:1 to 6:1 ratio. If the header is decorative, shorter is almost always better.

Prepare the file so it loads fast

The header is often the largest image on every page of a blog, so its file size affects your whole site.

Export as JPG for photos or WebP if your editor supports it. Use PNG only for flat graphics with sharp text or transparency.
Keep the file under 150 KB. Under 100 KB is a good target for a photo header at 2400 by 500 pixels with quality around 75.
Strip location and camera data when exporting.

Free image editors and browser-based compressors handle all of this without fuss, and you can find more sizing and styling guides in our template customization section.

How to add a Blogger header image

Before changing anything, back up your theme from Theme, then the arrow next to Customize, then Backup. Save the downloaded XML file somewhere you will find it again.
Go to Layout in the Blogger dashboard.
Find the Header gadget at the top and click its edit icon.
Under Image, choose From your computer and upload your file.
Pick a placement option: Behind title and description, Instead of title and description, or Have description placed after the image.
Tick Shrink to fit only if your image is wider than the header area.
Save, then view the blog on desktop and on a phone.

Which placement option to choose

Choose Instead of title and description if your image already contains your blog name as part of the design. Choose Behind title and description if you want the live text to sit on top of a background photo. That keeps your title as real text, which is better for search engines and screen readers, but you will need a calm area in the image where the text stays readable.

Why "use a big image and let it scale" is bad advice

A common tip on forums is to upload a huge image, 4000 pixels or more, and let Blogger and the browser scale it down. It sounds safe. In practice it causes three problems.

First, file size. A 4000 pixel photo header can easily weigh 1 MB or more, and every visitor downloads it on every page. On mobile data that can add a second or more to load time. Second, Blogger serves images through its own resizing system, and some templates request the original size anyway, so scaling does not always save bandwidth. Third, a very wide image scaled down to a phone screen shrinks any text inside it to an unreadable size.

The better approach is to export at exactly the template width, or twice that for sharpness, and keep text out of the image when you can.

Fixing headers that crop or squash on mobile

If your header looks fine on desktop but crops on phones, the template is probably using it as a CSS background image with a fixed height. You can usually fix it without editing the theme HTML by adding a few lines through Theme, Customize, Advanced, Add CSS. Our guide to customizing a template without breaking the layout explains how to make changes like this safely.

Two adjustments solve most cases:

Set the header background to cover the area and center on the most important part of the picture. That keeps the subject in view while the edges crop.
Reduce the header height at screen widths below 600 pixels with a media query, so the image is not forced into a tall, narrow box.

If your header is an inline image rather than a background, setting it to a maximum width of 100 percent with an automatic height stops it from overflowing the screen.

Whichever fix you use, save and check the result straight away on a real phone. Small CSS changes can affect other parts of the template, such as the navigation bar or the blog title, and it is far easier to undo one change than five.

A quick checklist before you call it done

Check the blog on a phone, a tablet and a laptop.
Check it in both light and dark mode if your template supports both.
Confirm your blog title is still visible or present as text somewhere on the page.
Run the page through a speed test and look at the header file size in the results.
Make sure the header links to your homepage, which Blogger does by default.

Frequently asked questions

What size should a Blogger header image be?

Match your template's header width, which you can find with your browser's Inspect tool. Most fixed-width templates fall between 960 and 1200 pixels wide. Doubling that width keeps the image sharp on high-density screens, and a height of 200 to 300 pixels suits most blogs.

Why is my Blogger header image blurry?

Usually the image is smaller than the space it is displayed in, so the browser stretches it. It can also be heavy compression. Export at twice the display width with a quality setting around 75 and upload it again.

How do I make my Blogger header image fit on mobile?

Keep important content near the center of the image and avoid placing text near the edges. Add custom CSS so the header covers its area and reduces height on small screens. Test on an actual phone, since desktop browser previews are not always accurate.