Change background image in Image Show

Hello All,

How do you change the background image in the Image Show module in Startup template. I try to make modifications in the CSS but I'm getting errors from the controller in the helper.php file.

PLEASE HELP!

Thanks in advance.

Bre'

If you are talking about the image in header then double check you are using correct css selector.

Code: Select all

#gkHeader.nobg {
    background: url("/joomla25/startup/templates/gk_startup/images/header_bg.jpg") no-repeat scroll center top transparent;
}


Add above code in your override.css file and enable css override from template settings > advanced settings.
Replace name of image & location if different.


Let us know as changing above css should not cause any errors.

See you around...

Thank you NormanUK for your help.

I see how this changes the image for the current slide, but my case is if I wasn't clear :

I want to create image shows on other sections of the site using the startup style but with different backgrounds. If I change module suffix to an unique style and identify it in the override.css file will this present an unique background in the module? Or is this another way of doing this?

I love the way starter style presents itself and I would add my creative touches to identify different sections of the site.


Thanks in advance for your help.

Bre'

Header image is not in imageshow module, it is inside element #gkHeader.nobg as a background image.

You can define your own suffixes in template settings > features > suffixes for pages.

Then you can add them to your override.css as per my example suffix and css code as below.

If I have following suffixes setup in template settings.
Menu item id 200 - newsheader
Menu item id 250 - sportsheader
Menu item id 278 - gamesheader

Then I would use following css codes making sure image names used below is uploaded to my server.

Code: Select all

.newsheader #gkHeader {
    background: url("/joomla25/startup/templates/gk_startup/images/header_news.jpg") no-repeat scroll center top transparent;}

.sportsheader #gkHeader {
    background: url("/joomla25/startup/templates/gk_startup/images/header_sports.jpg") no-repeat scroll center top transparent;}

.gamesheader #gkHeader {
    background: url("/joomla25/startup/templates/gk_startup/images/header_games.jpg") no-repeat scroll center top transparent;}


So depending on which menu item id I press then background would change.

You can see following url for more information on suffixes for pages setup
https://www.gavick.com/forums/black-and ... 20suffixes

See you around...