2017-12-30, 08:13:14
(2016-10-06, 01:04:48)Timbow Wrote: 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.Hi, i try this but sadly it didn't work - i would be very happy if i could style individual headerimages for my pages.
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.
If you have any other suggestions pls. let me know. best l5