Hi!
I’m sorry I didn’t reply sooner – somehow I’ve missed your post.
This would require a little extra work, but is possible:
– Firstly, set the background as you wish using Background Manager to start with.
– The next step is to select a Background Overlay and keep the opacity at 100% (no opacity). The reason for this, is that you now have an element called #myatu_bgm_overlay that you can override.
– Now you can use the “Custom Stylesheet” option of the Image Set(s) to add extra CSS code, that will give you that dark fade at the top. You could use a black-to-transparent PNG file, like so:
#myatu_bgm_overlay {
background-image: url('/path_to_my/custom_overlay/image.png') repeat-x fixed top left transparent;
}
Or alternatively, using entirely CSS3 instead of an image:
#myatu_bgm_overlay {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
For different gradients and colors using CSS3, have a look at http://www.colorzilla.com/gradient-editor/ for an auto-generator (as used above).
Note: keep in mind that this will override your the overlay you’ve chosen from the Settings screen (ie., black diagonal lines).
