Header background image

Public Ticket #7028

Conversation thread

PenciDesign replied

7 years ago

Staff Reply

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

onyke replied

7 years ago

Customer Reply

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

PenciDesign replied

7 years ago

Staff Reply

Hi,

The header contain much things inside it - That's not image only. So, you can't do that.

Best Regards,

PenciDesign

onyke replied

7 years ago

Customer Reply

Its looks better but its possible to get effect like this?:

PenciDesign replied

7 years ago

Staff Reply

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 started the conversation

7 years ago

Conversation Start

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?

Want to join this conversation or access attachments? Sign in first.