[Support request] Issue with image header

[Manuel]

Hi,
I try since this morning to find a solution with the image header that I put with background image but I didn’t find any solution. I found about page header but I don’t see on my dashboard. I tried several things but nothing working. I was looking on your forum but impossible to find a solution. So I’m sorry to ask you!

My problem is (I hope I will be clear) that when you enlarge the page on the browser the look is good (I have a big screen) but when you reduce the screen of the browser there is a big margin between the background image and the content, letting a big empty place with the phone browser.

Have a look with the page of the blog: https://rebelrepublikart.com/the-design-collection/

In advance thank you,
Manuel

[David]

Hi there,

to keep a background image responsive you need to make the container respond to the screen width. Easiest way to do that is using % padding. Add this CSS to do so:

.site-header .inside-header {
    padding: 31% 0px 0px 0px;
}

The 31% is the Top Padding value and it was calculated by this calculation:

Orignal Image Height / Original Image Width * 100

[Manuel]

You are so good David! Working so good! Thank you so much!
I have another question. Do I have to use a new topic or on this one?
Manuel

[David]

Glad to be of help.
If you can start a new topic for any other questions that would be much appreciated 🙂

[Author]

Posts