HEADER IMAGE

Illdy
1

Hello,
My header image is cut into mobile browsers, but in tablet and computers it is works fine.
How can i configure to resize in mobiles?

thanks in advance

2

Hello @delara,

You can try to change the header image CSS style from cover to contain, so it takes the full height:

#header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

This might come with a series of malfunctions, so you might want to include the no-repeat and center alignment.

#header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Let me know if this is what you were looking for.

Regards

3

Hello,
This can be a workaround, but I preferred that only the image will be modified in the mobile?can be expanded to all page? can be this possible?

thanks in advance

4

Hello @delara,

Using a media query you can make the code active only on mobiles:

@media (max-width: 768px) {
  #header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

Regards

5

OK, perfect!
Finally, is there any way to adjust in mobile like in laptop?

thanks in advance

6

That worked perfect, but what is the ideal image size for the header both pages and jumbotron?

7

Sorry its not working perfect after all, the horizontal view is good, but the height is not working very well, there is a big white gap under the image.

8

Hello,

Can you please provide the website link so I can have a live look at the issue?

Thank you!

9

blinkbeautyclinic.no is the website.

changed the front picture size to 2000x1250 its ok but a littlebit hight is too big. Also not responsive…

Alex