@allucard What IPS Theme is it you are using as standard ? This is the CSS to make the effect of two images.
This is extracted from Animated and you will have to customize it for your theme.
this creates the header (globalTemplate)
<header id='header' class='animateBack'><div class='animateFront'>
<div class='ipsLayout_container'>
<div class='ipsClearfix alignHeader'>
{template="logo" app="core" group="global" params=""}
</div></div></div>
</header>
/* ============== */
/* HEADER */
/* ============== */
#header {
background-color: {theme="headerBackground"};
}
/* Background position = width of banner_bg.jpg */
@-webkit-keyframes headerAnimate {
from { background-position: 0 50%; }
to { background-position: -1584px 50%; }
}
@-moz-keyframes headerAnimate {
from { background-position: 0 50%; }
to { background-position: -1584px 50%; }
}
@keyframes headerAnimate {
from { background-position: 0 50%; }
to { background-position: -1584px 50%; }
}
@-webkit-keyframes headerAnimateBack {
from { background-position: 0 50%; }
to { background-position: 1920px 50%; }
}
@-moz-keyframes headerAnimateBack {
from { background-position: 0 50%; }
to { background-position: 1920px 50%; }
}
@keyframes headerAnimateBack {
from { background-position: 0 50%; }
to { background-position: 1920px 50%; }
}
.animateBack {
background-image: url('http://i.imgur.com/ycHMqgD.jpg');
background-repeat: repeat-x;
background-position: 0 50%;
}
.animateFront {
background-image: url('http://i.imgur.com/NRtTWhG.png');
background-repeat: repeat-x;
background-position: 0 50%;
padding-bottom: 10px;
box-shadow: 0px -1px 0px rgba(255,255,255,0.15) inset;
}
/* Restrict animation to desktops */
@media screen and (min-width:980px){
.animateBack {
-webkit-animation: headerAnimateBack 200s infinite linear;
-moz-animation: headerAnimateBack 200s infinite linear;
animation: headerAnimateBack 200s infinite linear;
}
.animateFront {
-webkit-animation: headerAnimate 150s infinite linear;
-moz-animation: headerAnimate 150s infinite linear;
animation: headerAnimate 150s infinite linear;
}
}
These two lines controls what image there is there.
background-image: url('{resource="ipsfocus/headerTop.png" app="core" location="front"}');
background-image: url('{resource="ipsfocus/headerBottom.jpg" app="core" location="front"}');
This will give you something like this.