Archived topic
header background image
3 replies · Started by aladin on December 3, 2019
what i want is simple but i still can't find a way to do it although i have the premium version.
i want the height of the background picture to change depending on it's width so if i'am using a larger screen the background picture can extend its height depending on the width which is not happening maybe i should extend the header container? and if i can how to do that?
i already tried changing bottom and top padding nothing seems to work!
Hi there,
the trick is to make sure the aspect ratio of the container ( site header ) matches that of the original image.
First calculate image aspect ration ie. H / W x 100
That is 500 / 1950 * 100 = 25%.
We now split this % across the top and bottom padding of the site header using this CSS:
.inside-header {
padding: 12% 40px 12% 40px;
}you are the best thank you!
Glad to be of help.
