Responsive background in modules and tab

Hi
I'm setting up a new site with Quark and want to add some background images to the Tabs GK5 module - different on each tab. I want the background image to be responsive and change size depending on the screen size.
I use Tabs GK5 in module mode like in the demo/quick install and go to the respective custom HTML module to change the text and and background image.
I first tried just to replace the background image in the demo content, but it got cropped. I then tried to enter it as background image in the options tab of the module. Still being cropped.
I tried various suffix but no change, I can't get the image to re-size. I tried module position outside the Tabs GK5 module, but result the same, no re-size.
Anyone who can help out with an answer to this?
Thanks!
Best regards
Kenneth

Hi

It's really hard to answer without seeing the actual site, so if You want me to tell You the exact solution please tell me the url and which module You have in mind exactly.

If You can use it by Yourself than I believe solution can be adding a style to the class of the element this background is visible:

Code: Select all

background-size: 100% auto;


or, if background will not cover the height (but this will cut edges)

Code: Select all

background-size: cover;


Hi teitbite

Thanks for your help. I have tried to figure it out but think I need some more help. I'm not too familiar with adding classes, etc.

Basically I would like to be able to get the same result as in the header module. An image that is responsive in the background and text and links on top of the image.

I would like to do this in a custom HTML module and also use those modules in the GK Tab module. Preferably any position.

My site is not published yet so I will send you a PM with login. The Url is http://kennethsvendlund.com

Hi

I'm afraid looking at Your site did not clarified the request, but I think You are talking about adding a responsive background to any module. I propose to use module class suffix. This is how it works:

1. in module advanced settings add a module class suffix. for example: module_background1
2. add this code to override.css

Code: Select all

.module_background1 {
background: url(path_to_the_background_image) no-repeat center center transparent;
background-size: cover;
}


Thank you very much. It gave me exactly what I wanted and you taught me the principle of adding an background image or other custom css codes to a module.

Highly appreciated! Thanks a lot!

Hi

Most of the modules in joomla have an option to add a file for background directly in module settings too, but You do not have as much control over the styling of it than.