[Resolved] header background image

[aladin]

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!

[David]

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;
}

[aladin]

you are the best thank you!

[David]

Glad to be of help.

[Author]

Posts