Site logo

[Resolved] Header background is distorted

Home Forums Support [Resolved] Header background is distorted

Home Forums Support Header background is distorted

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #170910
    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.
    #170929
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #170936
    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.

    #171003
    Tom
    Lead Developer
    Lead Developer

    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? 🙂

    #171236
    Benjamin

    Hi Tom,

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

    thanks!

    #171292
    Tom
    Lead Developer
    Lead Developer

    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>
    #171346
    Benjamin

    hoo!! Yeahh! Thanks!!!

    #171396
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.