Hi Louw

Sorry to say this option is not available as this area of the template is controlled via PHP rather than CSS.

Ciarán

Thanks.

Would it maybe be possible to resize the background image when viewed on a tablet or phone? Or maybe show a different background image?

http://marketingsolutions.capetown/

Hi Louw

Thank you Magnus

Try adding the following to for example the 'Phone (Portrait) Custom CSS' field in the 'Responsive Options' tab of your templates...

.touch #header_bg {

    background-size: auto 600px !important;

}

Depending on your taste you may wish to edit this further where 600px is the height of your image. Always ensure the height exceeds the height of the device you are setting.

Ciarán

Thanks for helping with this. Unfortunately nothing changed when I inserted the code when viewed on a tablet or phone.

Would you be able to log in and check if I did it correctly?

Sure. Details can be sent to info@joomla51.com. Please paste a link to this post in your email for our reference.

Ciarán

Thank you Louw

I have updated your template to the latest download which has improved how your background is viewed on mobile devices. Let me know if this is a suitable solution.

Ciarán

Thanks for helping out. Unfortunately the background image did not display correctly as the icons remained cut off on small screens. I added the following code in the responsive options section to make the header size smaller on mobile devices:

#header_bg {
height: 25% !important;
}

It moves the rest of the site up on certain screen sizes(hiding the background). Do you see any possible problem with the code or with this solutions?

Thanks again.

That seems perfect. I cant imagine any possible issues.

Good work... I had never even considered that option . Thank you for sharing!

Ciarán

Awesome! Thanks for looking into this and for the great service as always