"Header background image" (#1907166) / PenciDesign

Comments

onyke started the conversation
February 23, 2019 at 12:44am
Hello,
I would like the image of my header background to adapt to the resolution. I want to achieve the effect that the picture always had the original width and height. I do not know how to describe it exactly, so I will post the screen which effect I want to get.
Is it possible to set it directly in the admin panel or do it need css editions?
2,699
PenciDesign replied
February 23, 2019 at 2:16pm
Hi,
As you can see because the width on desktop & mobile is different, so, if you want to do that, you need to change the height of header on mobile to make it has the same ratio. Please add more this code to Customize > Custom CSS to change it on mobile:
@media only screen and (max-width: 768px){ #header .inner-header .container{ padding: 20px 0; } }
Change value 20 to value as you want on mobile.

Best Regards,
PenciDesign
onyke replied
February 26, 2019 at 8:59pm
Its looks better but its possible to get effect like this?:
2,699
PenciDesign replied
February 27, 2019 at 11:29am
Hi,
The header contain much things inside it - That's not image only. So, you can't do that.

Best Regards,
PenciDesign

onyke replied

February 27, 2019 at 9:33pm

OK i already do that by using this code:

https://stackoverflow.com/a/14446663/8473734

#header .inner-header {
   height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 40%;
    background-image: url(img.jpg);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

I add this code to Custom CSS and its working

2,699
PenciDesign replied
February 28, 2019 at 3:15am
Hi,
It can work with your case, but maybe if you change the settings - that custom css code can be make your header broken.. So, let's attention to that

Best Regards,
PenciDesign