Responsive module background?

Hello,
I followed few threads to find the way to set an image as background for an html module in the one-page configuration and this is what I wrote in override.css to get it:

#gkBottom1-2 {background: url('path-to-the-image') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This works perfectly: the image is centered and strecthes to fill the screen width if the screen is wider than the image, it doesn't if the screen is smaller. To better explain: visualization is just perfect on any laptop and desktop monitor, but on smartphones (and I guess also on tablets, even if I did not check) I can see just a part of the background image, losing the effect I was trying to get.

Do you know if there's a way to achieve a total responsiveness of the background image?

Thank you very much

Matteo

hi,
I suggest on smartphone use only color background - no images, less means better.

If you will add URL I can check on smartphone & tablet

Thank you Pawel,
does this means that there's no way to achieve that?

In this case, could you please drive me to set different backgrounds for desktop/laptop and mobiles?
Check the beta version of the website at www.europeisanarchipelago.com

Thank you very much

M

You can try to replace "cover" into "contain" -- inside background - this should help for BG images inside sections.

Hi Pawel,
using "contain" did not help. Or maybe did...I don't know exactly...I try to explain:

I was using two different images as background test in two different modules, one was a right dimensioned image (that I would have liked to used), the second was simply the joomla_black.gif system image. Both of them were having the same behaviour: strecthing to fit screen in desktop version and keeping "too large" on mobiles.
While I changed "cover" to"contain" the big one (http://www.europeisanarchipelago.com/#gkBottom1-2) does not strecth anymore to fit the screen in desktop and disappear completely on mobiles, the joomla_black.gif (http://www.europeisanarchipelago.com/#gkBottom1-3) is perfectly working...any idea of the reason why?

Thank you very much.

M

The only solution I see is use different BG image for different views - mobile, tablet and desktop.
templates\gk_creativity\css\mobile.css
templates\gk_creativity\css\tablet.css
templates\gk_creativity\css\small.tablet.css

check those @media only screen and (max-width: ....px) { } new features of CSS

Thank you Pawel,

I'll work on it.

M