Making header image size-fixed to all screen

Hi,

I would like to make that the header image of home page take all the screen and it’s on all size of screen ,but i don’t know how to do.

Thank you for your help.

Maxence

Dear Maxence,

I would like to apologize in advance for the delay.

To make the background size adapts on all screen you have add the following custom CSS into your child theme’s style.css file:


.header-image{
  background-size: contain;
}

But it will produce another problem, I am afraid. Top-bottom spaces will appear as the height of the header area is fixed and can’t follow the background image height. Maybe you would add the following code to adjust the header height on specific mobile screen width:


/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {

  .header-image{
    height: 170px;
  } 
  
}

For complete list of common smartphone media query, please visit this link.

Regards,
Kharis

Hi Kharis,

Thank you for your help, unfortunately that’s not wordked.It’s not something very important,i will deal with for now.
Thanks for trying to fix it.

Best regards from Barcelona !