How to Add a Responsive Header Image to my Website

[janwlodarski]

I am using the Scribble theme. Site is http://www.inspireddesignbusinesscom. The header image is uploaded as just that, a header image. It is not responsive, i.e., it doesn't automatically resize when the window changes.

The logo piece in the center I can upload as the header image. But I want the maroon background piece to automatically resize. If you look at this in Chrome, you'll see that it doesn't go all the way across.

How can I make this happen?

Thanks for any help!

🙂

Jan

http://www.inspireddesignbusiness.com

[MoodyRiviera]

I don't think your theme is responsive, so not sure how it will help to make the header image responsive...if that's even possible. I mean, it looks to me that even if that header image resizes when the window changes, the other elements on the page are still going to *not* resize. (???)

*MoodyRiviera*

[Erik D. Slater]

My buddy Moodster here is correct (sorry man ... I've been a bit quiet lately ... lots of work going on 🙂 )

Scribble is one of those old, non-responsive Genesis themes that got left for dust.

One thing I have learned over the years is the complexity with headers. There are different ways to make a header responsive. Using the <img> tag is the most natural way to make that happen ... but different people have different responsive requirements, so it doesn't fit all purposes ... and neither does the CSS approach.

But in this case, I'm wondering if switching to a responsive theme may be the better solution here ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[janwlodarski]

Thanks Moody and Erik - you're right the theme is not responsive but I do love it. Maybe I'll see if I can find something similar and recreate it and I'll just have to change the header for now.

THANK YOU! 🙂

[Erik D. Slater]

If you do look for another theme - and you want to replicate your existing home page layout - don't be put off by some of the layouts you see with other themes.

While many look as though (1) your header image is in the top left-hand corner, while (2) your navigation is in the top right location, that can be changed with minimal CSS efforts.

You might not think that when you see it, but Parallax Pro (just an example) could replicate your home page layout since it has generic widgets for your content areas, whereas Scribble has specific widgets for your "welcome", "about", "blog" and "services" areas.

CSS changes would be required ... which is always the case, I'm afraid 🙂 Perhaps one or two tweaks to the theme's functions.php file may be needed, e.g. changing the custom header dimensions for your header image.

Beyond that, I think it could be doable without too much pain ... although I admit I haven't looked beyond your home page at this point 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Author]

Posts