[Resolved] Move header image to the left while responsive

[Musa Ahmad]

Hi!
How can I make the header image moves to the left while responsive and maintain its height.

Here is the sample that I want: http://www.smartpassiveincome.com/

This is my current header image: http://www.musaahmad.com/test/
If I resize the browser to table or mobile screen size my face with disappear.

[Tom]

Hi there,

A lot of it has to do with the aspect ratio of the image.

However, you can improve it with this CSS:

.generate-content-header {
    background-position: center top;
}

[Musa Ahmad]

I have tried you CSS code. its working but the image size become smaller and my image still disappear on mobile screen.

How can I maintain the size of the image and make it move’s to the left side, so my picture will not disappear.

How did they code for the following header image, Do you have any idea? Seems like the header image is moving to the left side when display on tablet or mobile : http://www.smartpassiveincome.com/

Sorry its still confusing me. actually I love GeneratePress

[Roberto]

Interesting. Following

[Tom]

They’re not doing anything special on that site – they just have the image sized right for their aspect ratio.

In fact, they’re using the exact code I gave you above.

If you want it to end up looking like that, you’re best off copying their background image, and created yours based on it (same width, height and picture of you in the same place).

[Musa Ahmad]

Yes, I got it.
It solve my problem.
Thanks Tom.
I love GP themes and GP Add-ons. Can’t wait to see the new Add-on coming up.
Good job man. keep it up.

[Tom]

Thanks! Glad I could help 🙂

[Author]

Posts