responsive image in Image Show Gk4 and reponsive background

Hello everybody

It's possible make responsive the images of the slides from Image Show Gk4? How can I'll do it?

On the other hand in no main page I select a image to background and try make it responsive changing template.css

Code: Select all

body {
   background: #fff url('../images/logo_web2.jpg') no-repeat center top;
   background-size: cover;
   color: #666;
   font-size: 16px;
   font-weight: 300;
   line-height: 1.6;
   margin: 0;
   min-height: 100%;
   padding: 0;
   word-wrap: break-word;
}

But the image is not charge. How can I solve it?

Thank you

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

The website is nova.institutdosrius.cat

Thank you in advance

Hi

I can see some changes to those backgrounds already, most probably to set it in correct place. to make this background responsive You should use code:

Code: Select all

#gkIs-gk-is-682.gkIsWrapper-gk_university .gkIsSlide {
    background-size: 100% auto;
}


but with You positioning it may not work very well. I think what You need it to correct position for different screens widths. Since it's a lot of work, I'm gonna explain how to do it, so You will be bale to make it by Yourself.

For some of the screen widths use different background size. Here is an example about how to use it:

Code: Select all

@media only screen and (max-width:810px) {
background-size: 1025 auto;
background-position: -78px 70px;
}

@media only screen and (max-width:710px) {
background-size: 900 auto;
background-position: -50px 50px;
}


Dear Tebite,

Thank you very much for your help, but could say me in where I need insert this code. I don't know if is necessary to put it directly in template.css or perhaps in style.css in modules/mod_image_show_gk4/styles/gk_university

I hope for your answer and I repeat thank you

Hi

Just treat it as any other css modification and put it to template's /css/override.css which was designed for it. Please remember that override needs to be enabled in order to be used on site.

Oh great!
Thank you Teitbite I've tried and now the background is responsive. Now I need to try different sizes of background for different sizes of screens. I'll try and if I can't achive perhaps I'll ask again in the forum

Hi

I'm afraid this it the only way to do this. Let me know if You will have problems with some widths of screen.