Header image crop issue

Hi team,

How can I get the template to position the top of the image at the begin of the page? If you visit http://www.lightstyle.co.nz/web/dridemo/index.php/quem-somos you'll notice that the lady's eyes are cropped and if you save that image and open on your pc you'll notice that I have her whole head in the shot.

Currently uploading images with 1920x1280 pixels. Is it an image dimension issue or a need for custom CSS?

Hi

Plese add this to override.css

Code: Select all

#gkHeaderMod img {
    top: 0 !important;
    transform: translateY(0px) translateX(-50%);
    -webkit-transform: translateY(0px) translateX(-50%);
    -moz-transform: translateY(0px) translateX(-50%);
    -ms-transform: translateY(0px) translateX(-50%);
    -o-transform: translateY(0px) translateX(-50%);
}


Hi teitbite,

The code has solved the image issue which is great, but has killed the parallax effect. Ideas?

Thanks,
Andre

Hi

Sorry, that's basically why the top and bottom of the image are cut off. It was to cover the screen and sustain parallax effect. Try replace it with effect. Not a parallax exactly, but will look similar.

Code: Select all

#gkHeaderMod {
    background: #26292b url("/web/dridemo/images/headers/destaque-quemsomos33-33.jpg") repeat fixed 0 0;
}

#gkHeaderMod img {
    display: none;
}


Hi Teitbite,

Last suggestion is unsuitable as I an using a different image for each page's header. What about using media query? I have played around a bit but would like to ask you to check the code bellow and suggest modifications if it's not 100% correct.

The media query is already usable but I'm still with issues for 768x1024 horizontal and 680x1280 vertical...

Code: Select all

    #gkHeaderMod img {
        transform: translateY(-40%) translateX(-50%);
    }

@media  (min-width: 320px) and (max-width: 480px) {
#gkHeaderMod > img {
transform: translateY(-44%) translateX(-50%)  !important
}
}

@media  (min-width: 360px) and (max-width: 640px) {
#gkHeaderMod > img {
transform: translateY(-42%) translateX(-50%)  !important
}
}
 
@media  (min-width: 768px) and (max-width: 1024px) {
#gkHeaderMod > img {
transform: translateY(-42%) translateX(-50%)  !important
}
}

@media  (min-width: 800px) and (max-width: 1280px) {
#gkHeaderMod > img {
transform: translateY(-47%) translateX(-50%)  !important
}
}

Hi

It's not a perfect solution, because there are many of devices with different screen sizes. But it will cover most popular.

Also remember to use a syntax like:

Code: Select all

transform: translateY(-44%) translateX(-50%)  !important;
-webkit-transform: translateY(-44%) translateX(-50%)  !important;
-moz-transform: translateY(-44%) translateX(-50%)  !important;
-ms-transform: translateY(-44%) translateX(-50%)  !important;
-o-transform: translateY(-44%) translateX(-50%)  !important;


to support older browsers versions.