Header Background image is not responsive

Support
#1

Hello dear Theme support,

I try to put an image on the header part. But the image is not responsive and not align on the theme.
https://yhsay.com is our site.

The photo I have inserted into the backage is as below link.

I am on X PRO theme.

Regards
Daphne

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .hm1 .x-bg .x-bg-layer.x-bg-layer-image {
        background-size: contain !important;
        background-color: #fff601;
    }
}
#3

Hello dear Thai,

I have done what you have told. But nothing happened.

I don’t know why.

Regards
Daphne

#4

Hi There,

Please update your CSS as follows and then clear your browser cache and test your site.

@media (max-width: 979px){
    .hm1 .x-bg .x-bg-layer.x-bg-layer-image {
        background-size: contain !important;
        background-color: #fff601;
    }
}

Hope that helps.

#5

Hello there,

Thanks for your help.

I have did what you told. But still it does not work.

I don’t know why.

Regards
Daphne

#6

Hi Daphe,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

#7

Hello Dear Jade,

Thanks a lot for your attention.

I have sent you the login details of yhsay.com by private message.

Regards
Daphne

#8

Hey Daphne,

The code is working as it is meant to be. Your idea or responsiveness might not be what the code does. For you to better understand how background images works, with Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

#9

Hello Ruenel,

Thanks a lot for your kind explanation.

I kind of understand what is going on.

Regards
Daphne

#10

Hi @flosmall,

Let us know how it goes.

Thanks. :slight_smile:

#11

Hello Nico.

Thanks a lot for your asking and tracking how is it finally.

As I am not a developer. And I understand now i cannot control it via pro header based on my alibility.

So I am trying to import demo content of X theme of integrity. Still the demo only contains the page content, header is not included in the standard demo.

So still I am not be able to create awesome header or footer within pro or X.

regards
Daphne

#12

Hi Daphne

What you are referring to header I believe it is the slider above the masthead - you are referring to the big hero video with the girl surfing above masthead right?

To achieve a similar effect in the header builder you can use the sticky template and change the order of the bars.

Or you also can install revolution slider on Wp Admin > X

And download a slide template from :

https://revolution.themepunch.com/free-slider-exchange/

Import to your Revolution Slider and Import to your slider, make your modifications…once it is ready.

Go to your page, click edit page, and on WP classic backend editor, and assign the slider above masthead.

Hope it helps