Twenty Thirteen header image

Can you link a webpage demonstrating the issue?

I agree. The header image is a problem with the Twenty Thirteen theme. How can we make the header image responsive to the screen size??
https://www.zanadiahome.com/zanadia-blog/

@zanadia, you can create your own thread if you need support with your issue.

It is the same issue.

I’m waiting for Ian to provide a link to his website. If you have an answer please share it.

Hi Andrew

Thank you for coming back to me so swiftly

Link to header image I created below, since I have an under construction plugin active at the site which is creative dialogue.co.uk

https://tinyurl.com/ofd2yop

Most likely I am trying to achieve something in the wrong way! I see from other people responding that Twenty Thirteen is not ‘responsive’ which I assume means exactly what I am trying to achieve.

If I can tell you what I have in mind perhaps you could suggest where I might find a workaround.

I have a ‘logo’ which is simply Creative [Rockwell] Dialogue [Myriad Pro]. I created that and the header photo in Photoshop. I want to insert that as the header on my web pages.

However if I follow the instructions in Twenty Thirteen theme to replace the header image with an image 1600*230 it appears different in various browsers and on iPad.

Any thoughts much appreciated

@ian01 you have chosen the right kind of header image for Twentythirteen theme, all you have to do is

• Edit that image to not have the text in it.
• Under Appearance > Header, make sure header text is checked to display.
• Style the text (site title and tagline) to be white.

Header image in Twentythirteen theme is not responsive and will never be, it’s implemented as background image for a div with fixed height. Even if the fixed height is taken out, still there is no CSS way (that I know of) to make a <div> responsive proportionally width AND height the same as <img> with responsive class.

That is helpful paulwpxp thank you

However, maybe I didn’t make clear. The ‘logo’ CreativeDialogue (white out of) is currently part of the header image created in Photoshop. That is because I cannot find a way of combining Rockwell and Myriad Pro in the Twenty Thirteen theme header.

My concern is simply that when displayed in various browsers the extreme edges of the header image are cut off.

Is that what I should expect from a ‘not responsive’ theme?

Twentythirteen theme is responsive, but its implement of header image is not.

In this particular case, that text is a logo, so save the text in transparent png, and just use any of the CSS image replacement technique to the site-title and site-description, making use of background-size cover and adjust its size in a few breakpoints.

@vneha44 – please be aware that these forums are not for posting links to your site – https://codex.www.ads-software.com/Forum_Welcome#Helping_Out

I agree with you WPyogi. And its way to explain the header customization it’s not very clear to me, not an expert in php and wp programming.
But you must agree that its very strange that a responsive theme as 2013 doesn’t have a responsive header. Viewed in a smart phone the header almost takes all the first page.
So, I think that for you, as a WordPress moderator, only two possible positions remain:
1- To accept the contributions the others give to make wordpress better, even giving an incentive to everybody who wants to do it. I didn’t like this one. No I didn’t, but it was a positive contribution.
2- The most correct one, when speaking as you did – presenting a solution or telling us where we can find it.
I have the same problem. My blog seems like an aberration in a smartphone. I have a logo image which I used in 2011 and which resized with the screen.I tried to use it here and got nothing.
To ignore the header image it’s easy. You have an option for it.
How can we place one of ours at the header, resizing like all the others, after that is what I should like to know. At a normal site I know how to do it. With WordPress I confess I don’t.
Could you or anybody please help with this.

No, I cannot help you in this thread. Please start your own per the forum guidelines –

https://codex.www.ads-software.com/Forum_Welcome#Where_To_Post

The forum for twentythirteen is here:

https://www.ads-software.com/support/theme/twentythirteen#postform

Also, moderators here are volunteers like everyone else, so I don’t necessarily have any more expertise than anyone else.

Hi,

For creating a responsive header image in twentythirteen you might want to check out this thread, in particular the comments by cclambie about halfway down.