[Resolved] Header background is distorted

[Benjamin]

Hello Tom,
How i can make the background header of the phone may look exactly like the desktop, I do not use logo, only the background.

http://www2.municipios.gov.py/wp-content/uploads/2016/02/Sin-título.png

sorry for my English because I am speaking Spanish;)

• This topic was modified 10 years, 1 month ago by Benjamin.
• This topic was modified 10 years, 1 month ago by Benjamin.
• This topic was modified 10 years, 1 month ago by Benjamin.
• This topic was modified 10 years, 1 month ago by Benjamin.

[Tom]

Hi there,

Background images are tough when it comes to responsive design – that’s why they’re generally supposed to be patterns/designs and shouldn’t contain text.

I would personally upload the pattern as the background, and then upload the text as a separate image (logo) on top of the background.

That way you’ll get more consistent results on mobile 🙂

[Benjamin]

Thanks for your reply Tom,

I’ve already tried that way but I do not keep well, then there is no other way? it would be nice to be able to add more logos in the future, generateprees add-ons are some great tools.

[Tom]

If you have text within your background image, you’re going to run into trouble with responsive design no matter what – even if you weren’t using WordPress at all. Anything that should be seen on all devices should be an element that sits on top of the background.

What kind of logos are you wanting to see in GP? 🙂

[Benjamin]

Hi Tom,

I hope I can add more than one logo in the header, left-center-right. 🙂

thanks!

[Tom]

In order to do that you’d have to use GP Hooks.

You would add some like this into the “Before Header Content” hook:

<div class="grid-33">
    <img src="URL TO LEFT HEADER" alt="" />
</div>
<div class="grid-33">
    <img src="URL TO CENTER HEADER" alt="" />
</div>
<div class="grid-33">
    <img src="URL TO RIGHT HEADER" alt="" />
</div>

[Benjamin]

hoo!! Yeahh! Thanks!!!

[Tom]

You’re welcome 🙂

[Author]

Posts