A different picture on header for each page 
Author: Steve B.
Visited 3293,
Followers 1,
Shared 0
Hi
I have set up the header with a picture which works well on responsive sizes. However, I would like to have a different picture displayed for each page, is this possible?
Thanks in advance
Posted on the
Hello Steve
Yes - this is possible if you use some html/css.
You can on each or some of the pages, specify a background-image withoy repetition.
Kind regards
John S.
I have an old example, where it is put in the footer. It goes the same way for the header.
You can use some CSS.
In the page - settings - expert tab you can insert code like this :
<style>
#imHeaderObjects {background:green;}
#imFooterObjects {background:green;background-image: url(http://www.bramminginfo.dk/images/bottle-with-popping-cork_1f37e.png);background-repeat: no-repeat;}
</style>
I have made an example here : http://www.bramminginfo.dk/brm07/
The code is for page 1 ( Side 1 )
The code for page 2 is :
<style>
#imHeaderObjects {background:yellow;}
#imFooterObjects {background:yellow;background-image: url(http://www.bramminginfo.dk/images/bottle-with-popping-cork_1f37e.png);background-repeat: no-repeat;}
</style>
I have used an image to show how this is done. You could use the "same" image but with different colors.
The homepage has this code :
<style>
#imHeaderObjects {background:DarkGrey;}
#imFooterObjects {background:DarkGrey;background-image: url(http://www.bramminginfo.dk/images/owl_1f989.png);background-repeat: no-repeat;}
</style>
You don't need to give the code on every page. I have made a page 4 wthat has no code. Then the default settings is taken from what you have specified in the settings.
Kind regards
John S.
Hi John,
Nice ...
Where did you find the #ID of each element to modify their properties.
Here for: imHeaderObjects & imFooterObjets
Documentation somewhere ?
Regards
Hello FALCK
Use the browsers ability to inspect the source for the page.
The same goes if you want to style an object on a page - you have to see the ID for this, the same way, as each object added, will have a "incremented/different" ID.
Kind regards
John S.
Steve, I note you have not commented on John's solution.
If the thought of playing with code (no matter how simple) leaves you cold, you can of course tell any page to have no template (step 3 Map, properties, Graphic TAB)
As such you could turn the top row of cells into something that looks like a header, and with the new menu object you could simply right click the menu in the header, copy, and paste into a row of cells on any page.
There are many ways to achieve what you want in WX5 (eg cell style with image behind, row/formats parallax image full width, etc), perhaps if you provide a screen shot we could offer better advise.
Hello Steve
Yes correct - you can make each page without a template and then make every page as you wish.
Sorry for not pointing this out - but I would never guess why you should then use the X5. One of the advantages in the X5 is the ability with the menu and footer and header and .....
Kind regards
John S.
All,
A better solution, shoule be to have a documentation from Incomedia with customizable elements name & ID are documented.
Read & undertsanding code is not the simply and fast solution for us.
Rregards
Many thanks to John!
Esach, thanks for the information to change the page but the problem is with the background header or just header.
Steve et Axel !
Grâce aux informations de John, j'ai réussi à avoir un arrière plan unique pour chacune de mes pages.
1- j'ai pris un modèle vide
2- étape 2 Modèle : l'arrière plan d'entête et l'entête sont vides et transparents (prévoir une hauteur suffisante 600 par ex)
3- j'ai ajouté dans le "Preview, images" de mon projet, 2 images que j'ai nommées image1.jpg et image2.jpg
4- étape 3 Plan : dans la page d'accueil, propriétés, avancées j'ai ajouté le code suivant dans
<style>
#imHeaderBg {background:transparent;background-image: url(/images/image1.jpg);background-repeat: no-repeat;}
</style>
5- dans la page 1, propriétés, avancées j'ai ajouté le code suivant dans
<style>
#imHeaderBg {background:transparent;background-image: url(/images/image1.jpg);background-repeat: no-repeat;}
</style>
6- Et voilà le résultat dans la P.J.
Si ça peut aider certains, ce n'est pas très compliqué...
Danielle
Hi Steve,
Here's another solution, which you can extend to your needs.
Create your banners and name them 1.jpg, 2.jpg, 3.jpg, etc.
Then go to step 1, general settings, go to Statistics, SEO and code (4th row, 1st column) and select the Advanced tab.
In the lower part of the screen add your images and place them, for example in the files directory.
Then in the upper part of the screen, select Before closing the </body> tag and enter the following code:
<script type="text/javascript">
var img=Math.floor(Math.random() * 9) + 1;
var img="files/"+img+".jpg";
document.getElementById('imHeader').style.backgroundImage = 'url('+ img +')';
</script>
(the 9 indicates the number of images you have for your header). The effect is best when the images are the same size.
Your screen should look something like in the attachment.
Every time you go to a new page or refresh your page the banner is selected at random from the images you provided.
If you want the background image on a page to be selected at random, then change 'imHeader' to ' imPageExtContainer'
Succes,
Robert
Robert,