You should see a canopy on top of this page. This is a great little item. You can add a canopy onto the top of your website which adds some atmosphere to it. This is specific to a joomlashine template but can easily be changed to any site.
CSS
/*-- Header Canopy --*/
/* Set Header Size - also corrects for mobile*/
#jsn-header {
padding-top: 140px;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
#jsn-header {
padding-top: 60px;
}
}
/* Background Image */
#jsn-page {
background-image: url(/images/kb/2016/789/canopy.png);
}
#jsn-page {
background-size: 100% auto;
background-repeat: no-repeat;
}
/* This stops the canopy from ever expanding (optional) */
@media only screen and (min-width: 1170px) {
#jsn-page {
background-size: 1170px;
background-position: top;
}
}
Notes
- From the JSN Gruve Template
- There are different coloured canopy graphics with this template that you can use. I think there is also the source PSD so you can modify it yourself.
- You do not have to use this graphic. You can use anything you want.
- Depending on the type of the tempalte you have the canopy might keep stretching
- The canopy is rigged to stop expanding at 1170px but you can remove the rule for this and then it will keep expanding i.e. 100%