Download
2016-10-06, 01:04:48
The banner image is a background image defined in the main css. Be aware the landing page background has its own css and in both cases they have transparent gradient overlays making the image darkish which you may or may not want to keep. The templates have <body id="page-slug" > (eg if your page has the slug "contact" or "about-us" then the body has that html id) so we can use that to style individual pages.
So open the main css, find line 3630, this declaration:
and below it or at the end of the file or even in the head section of the template paste what you want different for your specific page, something like this:
I am away and can't test it but I think that will work. You get the idea anyway I am sure.
So open the main css, find line 3630, this declaration:
Code:
#main > header {
padding: 12em 0 10em 0 ;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}and below it or at the end of the file or even in the head section of the template paste what you want different for your specific page, something like this:
Code:
#page-slug #main > header {
background-image: url("../../images/something.jpg");
}I am away and can't test it but I think that will work. You get the idea anyway I am sure.
