Shape 5

Joomla Templates => Clarity - Club => : morten44 August 21, 2012, 03:01:59 AM



: Resize background image based on browser size
: morten44 August 21, 2012, 03:01:59 AM
Hi
http://stcw.dk/
On this site i want to make it so the background picture can resize based on browser size.
There is a CSS3 code for this

html {
   background: url(images/background2.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

I have entered this code to template.css but nothing happens.
I then see that in the template properties you have a setting for body background.
I have tried to remove it but it pops straight backup.

How can I get to control the background picture using CSS in this template?
If not easy, can you suggest other template where its easier?

Kind regards
Morten


: Re: Resize background image based on browser size
: pmiddleton August 21, 2012, 08:14:33 AM
It's not impossible, but it really goes beyond the scope of these forums.

As a guide, though, try the following -

You would need to edit index.php to remove the calls made on backimage, as it is this function which takes the parameter from the template settings.

Then you'd need to edit template.css. You will see, at the very top, the body{ } section. This is where calls to background images are made.

For a little more guidance, take a look at template.css for a template that doesn't set the background image in the template settings. Cyan is one where the image is set in css.


: Re: Resize background image based on browser size
: morten44 August 22, 2012, 04:05:03 AM
Hi
Thanks for your advise. That was all i needed.
Sometimes I can sit for hours trying to resolve something but then not possible as template spesific.
Thanks for your guide. I think I can understand that, if not I will check out Cyan

Cheers
Morten


: Re: Resize background image based on browser size
: pmiddleton August 22, 2012, 06:51:12 AM
Glad to help