[Building Sakai] Adding background-image to portal pages

Thu Oct 17 07:50:59 PDT 2013

Hi, Kimberly.

I haven't been able to test this option, but it looks promising:

filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=’#730027′, endColorstr=’#FFFFFF′,GradientType=0 ),
progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=’images/Shield-Screen15.png′); /* IE6-9 */

 From Luke Mclean's comment on "December 16, 2011 at 1:46 pm" on this page:

http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/

Two comments below Luke's, Leah mentions a "-pie-background" property 
that might help you too.

Let me know. I hope this helps,
-Shawn

-- 
Shawn Foster
Instructional Technology Support and Application Development
Information Technology Services
Western University
London, Ontario, Canada

On 13-10-09 10:47 AM, Wilson, Kimberly wrote:
> Hi:
>
> I was able to create a custom gateway page for our Sakai site (CLE 2.9) but I was having issues with IE 8 and IE 9 using a gradient background and a background-image
>
> My CSS is below.
>
> I needed to add this to the new page right under the HTML tag, but I don't know what to do to enable carrying forward the background image to the rest of the site pages in IE 8 and IE 9 (it works fine in Firefox, of course):
> <!--[if IE 8 ]> <html lang="en" dir="ltr" class="ie8 ie"> <![endif]-->
> <!--[if IE 9 ]> <html lang="en" dir="ltr" class="ie9"> <![endif]-->
>
> Can anyone help me with this please?   Thank you!
>
> The CSS:
>
> #portalOuterContainer{
> background: rgb(109,0,25); /* Old browsers */
> background-image: url("images/Shield-Screen15.png"); /* fallback */
> /* IE9 SVG, needs conditional override of 'filter' to 'none' */
> background-image: url("images/Shield-Screen15.png"), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkMDAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhmMDIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgxJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
> background-image: url("images/Shield-Screen15.png"), -moz-linear-gradient(top, #730027 0%, #FFFFFF 80%);  /* FF3.6+ */
> background-image: url("images/Shield-Screen15.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#730027), color-stop(80%,#FFFFFF));   /* Chrome,Safari4+ */
> background-image: url("images/Shield-Screen15.png"), -webkit-linear-gradient(top, #730027 0%,#FFFFFF 80%);  /* Chrome10+,Safari5.1+ */
> background-image: url("images/Shield-Screen15.png"), -o-linear-gradient(top, #730027 0%,#FFFFFF 80%);  /* Opera 11.10+ */
> background-image: url("images/Shield-Screen15.png"), -ms-linear-gradient(top, #730027 0%,#FFFFFF 80%);  /* IE10+ */
> background-image: url("images/Shield-Screen15.png"), linear-gradient(top, #730027 0%,#FFFFFF 80%);  /* W3C */
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-8 */
> background-repeat: no-repeat;
> background-position: 110% -45%;
> }
>
> .ie8, .ie9  #portalContainer{
>                  background-image: url("images/Shield-Screen15.png");
>                  background-repeat: no-repeat;
>                  background-position: 110% -45%;
> }
>
> I tried adding the .ie8, .ie9 to the portalOuterContainer but it is conflicting with the gradient.
>
> Kim Wilson, MSCIS | Systems Analyst - IS Academic Systems | Albany Medical Center | 518-264-1055
> Walk to End Alzheimer's<http://act.alz.org/site/TR/Walk/NY-NortheasternNewYork?px=8229568&pg=personal&fr_id=3580> [Walk-to-End-Alzheimers-Logo_sm]
>
>
>
> -----------------------------------------
> CONFIDENTIALITY NOTICE: This email and any attachments may contain confidential information that is protected by law and is for the sole use of the individuals or entities to which it is addressed. If you are not the intended recipient, please notify the sender by replying to this email and destroying all copies of the communication and attachments. Further use, disclosure, copying, distribution of, or reliance upon the contents of this email and attachments is strictly prohibited. To contact Albany Medical Center, or for a copy of our privacy practices, please visit us on the Internet at www.amc.edu.
>
>
>
> _______________________________________________
> sakai-dev mailing list
> sakai-dev at collab.sakaiproject.org
> http://collab.sakaiproject.org/mailman/listinfo/sakai-dev
>
> TO UNSUBSCRIBE: send email to sakai-dev-unsubscribe at collab.sakaiproject.org with a subject of "unsubscribe"
>