Jump to content

[Solved] Module for changing background image?


Recommended Posts

Hi!

Is there a module that can change the background image randomly. I'm talking of THE background image :-)
in other words global.css and...
"#background-bg{
background:url(../img/page/background-bg.png) repeat-x top center;"

Not like a slide show, but the background image should change everytime somebody reloads to page!

Thanks

Share this post


Link to post
Share on other sites

I suggest that you edit header.tpl and change line 40 from:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>



to:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">



This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.

Share this post


Link to post
Share on other sites
I suggest that you edit header.tpl and change line 40 from:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>



to:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url(../img/page/background{math equation='rand(1, 6)'}.png repeat-x top center">



This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.



I know have
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url(../img/page/background{math equation='rand(1, 6)'}.jpg repeat-x top center">





in me header.tpl file (I though change .png to .jpg) and put som background1.jpg, background2.jpg ... in my img/page map, but nothing happens. It still shows the old background.

Share this post


Link to post
Share on other sites

Almost....

The ordinary background seems to always be at the top and then the randomly choosen one will follow further down (see picture).

To be more precise, I want to choose between the ordinary background which is just a blue blended stripe that repeat itself and then some other big backgrounds (more like wallpaper). I can always convert the blue blended stripe to one big backgound, so it also will be more lika a wallpaper if that helps!?

34136_zOR5NVwrZcDp7iMhmEhJ_t

Share this post


Link to post
Share on other sites
  • 3 months later...
  • 2 weeks later...
  • 2 years later...

I suggest that you edit header.tpl and change line 40 from:

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

to:

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">

This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.

 

 

Please can you update your code to prestashop 1.5.6.2 ?

thank you

Share this post


Link to post
Share on other sites

I found this solution too for random background that works with prestashop 1.5.6.2

 

http://www.prestashop.com/forums/topic/81255-resolu-fond-qui-change-apres-chaque-actualisation/?do=findComment&comment=451337

 

in theme/yourtheme/header.tpl change this or similar to this if you have an other theme

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if}">

to this

<script type="text/javascript">
    var fondListe=['1','2','3','4','5','6','7','8','9','10','11','12'];
    document.write('<body class="{if $hide_left_column}hide-left-column {/if} {if $hide_right_column}hide-right-column {/if} {if $content_only} content_only {/if} fond' + fondListe[Math.floor(Math.random()*fondListe.length)] +'"{if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}  >');
</script>

put your images in img folder and rename them to 01.jpg  02.jpg   03.jpg

 

and add css code in theme/yourtheme/css/global.css  like this

.fond1 { background: #ffffff url('../img/background/01.jpg') no-repeat center center fixed; }
.fond2 { background: #ffffff url('../img/background/02.jpg') no-repeat center center fixed; }
.fond3 { background: #ffffff url('../img/background/03.jpg') no-repeat center center fixed; }
.fond4 { background: #ffffff url('../img/background/04.jpg') no-repeat center center fixed; }
.fond5 { background: #ffffff url('../img/background/05.jpg') no-repeat center center fixed; }
.fond6 { background: #ffffff url('../img/background/06.jpg') no-repeat center center fixed; }
.fond7 { background: #ffffff url('../img/background/07.jpg') no-repeat center center fixed; }
.fond8 { background: #ffffff url('../img/background/08.jpg') no-repeat center center fixed; }
.fond9 { background: #ffffff url('../img/background/09.jpg') no-repeat center center fixed; }
.fond10 { background: #ffffff url('../img/background/10.jpg') no-repeat center center fixed; }
.fond11 { background: #ffffff url('../img/background/11.jpg') no-repeat center center fixed; }
.fond12 { background: #ffffff url('../img/background/12.jpg') no-repeat center center fixed; }

that s all

 

to make it responsive (flexible with the screen size : Fit background across screens) use this

.fond1, .fond2, .fond3, .fond4, .fond5, .fond6, .fond7, .fond8, .fond9, .fond10, .fond11, .fond12 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Edited by badrelmers (see edit history)

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More