Archived topic
Issue with image header
3 replies · Started by Manuel on May 2, 2022
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
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
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
Glad to be of help.
If you can start a new topic for any other questions that would be much appreciated :)
