change picture Size Header Modul

Hi,

i must change the Size of the Header to display the full picture size.

The Picture is in Fullsize 1680 x 880 but into the modul i see a cropp picture.

How can i change the modul css so that i can see the full sizes picture heigh! See the Attache Picture

I look many times into firebug but dont find the css class

Please help it is urgend

domain momo.pentax-akademie.de

Best Michael

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkHeader {
    background-size: 100% auto !important;
}


Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkHeader {
    background-size: 100% auto !important;
}


sorry but dont works,

Best
Michael

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkHeader {
    background-size: 100% auto !important;
}


sorry but dont works,

we check this way
#gkHeaderMod {
padding: 650px 0 0 0;
}

but this is not optimal !!

Best
Michael

Hi

I do not see my code on Your website, so it may not worki, becuase it's not there

Please make sure override is enabled in template settings and that all cache in joomla and server is disabled.

Try also the other way around with this code:

Code: Select all

.frontpage #gkHeader {
    background-size: auto 100% !important;
}


Hi

I do not see my code on Your website, so it may not worki, becuase it's not there

Please make sure override is enabled in template settings and that all cache in joomla and server is disabled.

Try also the other way around with this code:

Code: Select all

.frontpage #gkHeader {
    background-size: auto 100% !important;
}

Hi,

sorry but it is dont working. Everytime tah picture !Height! is to small.  Like my pictures in the first threat.

Best Michael


Hi

I think I know what the problem can be. What is Your screen size ? The code I gave You resizes the image to cover all available space. It looks ok if screen is same as image or bigger, but makes image smaller on smaller screens. Try use this code than:

Code: Select all

#gkHeader {
    background-size: inherit !important;
}


this will make the image show in it's actual size no resizing up or down.

Hi

I think I know what the problem can be. What is Your screen size ? The code I gave You resizes the image to cover all available space. It looks ok if screen is same as image or bigger, but makes image smaller on smaller screens. Try use this code than:

Code: Select all

#gkHeader {
    background-size: inherit !important;
}


this will make the image show in it's actual size no resizing up or down.

Hi,

my screen Size is 1680px 1050px. I check your new code at this morning. but its dont work. yesterday i will check picture in the bottom1 module, here we have the same effect. i check all background-size option and work with the background-image option too.
It is not possible to show the picture in the height of 650px or 450 px.

Picture original size : 1400px X 880px

Workflow:
change into the directory /templates/gk_steakhouse/images the header_bg with our picture.
**** if we put a picture into the module background picture field we see only white screen ****

Go into Template and put your code into the overwride field.

If we put this into the overwride:
#gkHeaderMod {
padding: 650px 0 0 0;
}

we can see the picture, but it is not dynamic. if the user have a smaller screen we run into a issue.

Best Regards
Michael

Hi

If You think the padding is the best option, than I think only way to use it is by setting it's height manually in override.css file. Like this:

Code: Select all

@media only screen and (max-width:1024px) {
#gkHeaderMod {
padding: 650px 0 0 0;
}
}

@media only screen and (max-width:900px) {
#gkHeaderMod {
padding: 450px 0 0 0;
}
}

@media only screen and (max-width:700px) {
#gkHeaderMod {
padding: 350px 0 0 0;
}
}


the above is just example, but I hope You get the idea of setting a different padding for a different screen heights.