HD-Background Selector - change image to be responsive friendly

[Nullus Verba]

Hey guys

Well I am trying to learn here something as I am still "fresh meat" than "experienced".

My problem is, that I want to use a background image for some subpages. this is working thanks to BG-HD (http://www.hyde-design.co.uk/free-joomla-extensions/hd-background-selector).

They also have the option to use custom css, but I cannot get it to work. The image is oversized (for testing, so it is okay) and should be scaled down automatically. I found this code:

Responsive image (fills area):

#rt-mainbody {
  background: url("/images/MYBACKGROUNDIMAGE.JPG") no-repeat scroll center top rgba(0, 0, 0, 0);
  background-size: 100% 100%;
}

source: https://groups.google.com/d/msg/gantry-framework-for-joomla-users/ga1e-zO0p9c/3A2eF3cf3IYJ

So basically "just" want to know how to get it work to make background images with HD-BG Selector responsive by using the "custom css" field.. or by another way which i do not see at the moment.

Thank you for all your help.

Kind regards

Mitch

[Nullus Verba]

I found something which worked:

In the gantry-custom.css I added the following:

body {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
}

Not sure if the "filter:" part is necessary. I removed that part and still it works. So I am happy.

Source:
http://www.rockettheme.com/forum/gantry-framework/175242-how-do-i-put-a-background-color-image-on-a-responsive-site