Creating a fade loop of image and text

**james438** · 12-18-2012, 03:39 AM

I am not sure the best way to describe this project.

Description: On my church website I have a fading quote. The quote toggles from quote one to two and back to one again in an infinite loop. One quote has a cross in the middle that joins two short phrases. The cross is actually the letter "Q" which uses an imported font that is installed when the user loads the website and is applied only to that letter to make it look like a cross. It works fine unless the website is viewed on a mobile browser which do not display custom fonts easily if at all. To solve this an image of a cross is displayed instead of the modified letter "Q" for mobile browsers. The website detects whether the browser is a mobile browser and loads slightly different javascript depending on whether the browser is mobile or not.

Problem: an image is displayed the image does not fade with the rest of the text.

Resources: The main church site is located here:http://www.sovgraceopc.org/
The demo is here: http://www.sovgraceopc.org/index2.php (This will display the main page as if it were in a mobile browser)
The javascript that I used is from here: http://www.greywyvern.com/code/javascript/fade

I know next to nothing about javascript, but I have dabbled a very little with it now and again. It may even be easier to start over from scratch with this script. I'm not sure. I know there are ways to fade text and ways to fade images, but it seems to me that it would be difficult to do the same with both at the same time. So basically does anyone have any ideas on how to fade both the image and the text?

**vwphillips** · 12-18-2012, 03:41 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.fader {
  width:400px;height:50px;border:solid red 1px;text-Align:center;font-Size:18px;background-Color:#FFFFCC;
}

.fader IMG {
 position:relative;height:30px;top:8px;
}

/*]]>*/
</style>

</head>

<body>
 <div id="tst" class="fader"  onmouseover="zxcTextImagetFader.Pause('tst');" onmouseout="zxcTextImagetFader.Auto('tst');">
 </div>
<br />
<br />
 <div id="tst2" class="fader"  onmouseover="zxcTextImagetFader.Pause('tst2');" onmouseout="zxcTextImagetFader.Auto('tst2');">
 </div>

<script type="text/javascript">
/*<![CDATA[*/
// Text Image Fader. (18-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcTextImagetFader={

 init:function(o){
  var id=o.ID,incol=this.rgb(o.FadeInColor,[0,0,0]),outc=this.rgb(o.FadeOutColor,[255,255,255]),ms=o.FadeDuration,holdin=o.HoldIn,holdout=o.HoldOut,ary=o.Array,obj=document.getElementById(id),ms=typeof(ms)=='number'?ms:1000;
  o=zxcTextImagetFader['zxc'+id]={
   obj:obj,
   ary:ary,
   cnt:0,
   col:[incol,outc],
   ms:ms,
   holdin:typeof(holdin)=='number'?holdin:ms*4,
   holdout:typeof(holdout)=='number'?holdout:500,
   ud:false,
   auto:true
  }
  this.fade(o,false);
 },

 Pause:function(id){
  var o=zxcTextImagetFader['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Auto:function(id){
  var o=zxcTextImagetFader['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ o.auto=true; oop.fade(o,!o.ud); },200);
  }
 },

 fade:function(o,ud){
  o.ud=ud;
  if (ud){
   o.cnt=++o.cnt%o.ary.length;
  }
  else {
   o.obj.innerHTML=o.ary[o.cnt];
   o.imgs=o.obj.getElementsByTagName('IMG');
  }
  this.animate(o,o.obj,'color',o.col[ud?0:1],o.col[ud?1:0],new Date(),o.ms,ud);
  for (var z0=0;z0<o.imgs.length;z0++){
   this.animate(o,o.imgs[z0],'',[ud?100:0],[ud?0:100],new Date(),o.ms,false);
  }
 },


 animate:function(o,obj,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,n=[],z0=0;
  for (;z0<f.length;z0++){
   n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
  }
  if (mde=='color'){
   obj.style.color='rgb('+parseInt(n[0])+','+parseInt(n[1])+','+parseInt(n[2])+')';
  }
  else {
   this.opac(obj,n[0]);
  }
  if (ms<mS){
   f[3]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,ud); },10);
  }
  else {
   if (mde=='color'){
    obj.style.color='rgb('+t[0]+','+t[1]+','+t[2]+')';
    if (o.auto){
     o.to=setTimeout(function(){ oop.fade(o,!ud); },ud?o.holdout:o.holdin);
    }
   }
   else {
    this.opac(obj,t[0]);
   }
  }
 },

 opac:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },


 rgb:function(hex,col){
  if (typeof(c)=='string'){
   hex=hex.replace('#','');
   if (hex.length==6){
    col=[Math.min(Math.max(parseInt(hex.substring(0,2),16),0),255),Math.min(Math.max(parseInt(hex.substring(2,4),16),0),255),Math.min(Math.max(parseInt(hex.substring(4),16),0),255)];
   }
  }
  return col;
 }


}

zxcTextImagetFader.init({
 ID:'tst',                // the unique ID name of the parent node.             (string)
 Array:[                  // an array of HTML code to diusplay.                 (array)
  'text 1 &nbsp;<img src="http://www.sovgraceopc.org/images/cross.png" /> text 2',
  'text 3',
  '<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" /> text 4 &nbsp;<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" />'
 ],
 FadeInColor:'#000000',  //(optional) the fade in color as HEX.                 (string, default = '#000000')
 FadeOutColor:'#FFFFCC', //(optional) the fade out color as HEX.                (string, default = '#FFFFFF')
 FadeDuration:1000,      //(optional) the duration in milli seconds.            (number, default = 1000)
 HoldIn:2000,            //(optional) the fade in hold delay in milli seconds.  (number, default = FadeDuration*4)
 HoldOut:200             //(optional) the fade out hold delay in milli seconds. (number, default = 500)
});

zxcTextImagetFader.init({
 ID:'tst2',
 Array:[
  'text 1 &nbsp;<img src="http://www.sovgraceopc.org/images/cross.png" /> text 2',
  'text 3',
  '<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" /> text 4 &nbsp;<img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" />'
 ]
});

/*]]>*/
</script>
</body>

</html>

the script you linked to faded the text by changing the color of the text which I did in the script above and used opacity for the images
however it is easier to use opacity for the complete DIV(this may distort the text)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.fader {
  width:400px;height:50px;border:solid red 1px;text-Align:center;font-Size:18px;background-Color:#FFFFCC;
}

.fader IMG {
 position:relative;height:30px;top:8px;
}

/*]]>*/
</style>

</head>

<body>
<div class="fader" >
 <div id="tst"  onmouseover="zxcFader.Pause('tst');" onmouseout="zxcFader.Auto('tst');">
 </div>
</div>
<br />
<br />
<div class="fader" >
 <div id="tst2"  onmouseover="zxcFader.Pause('tst2');" onmouseout="zxcFader.Auto('tst2');">
 </div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Fader. (18-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFader={

 init:function(o){
  var id=o.ID,ms=o.FadeDuration,holdin=o.HoldIn,holdout=o.HoldOut,ary=o.Array,obj=document.getElementById(id),ms=typeof(ms)=='number'?ms:1000;
  o=zxcFader['zxc'+id]={
   obj:obj,
   ary:ary,
   cnt:0,
   ms:ms,
   holdin:typeof(holdin)=='number'?holdin:ms*4,
   holdout:typeof(holdout)=='number'?holdout:500,
   ud:false,
   auto:true
  }
  this.fade(o,false);
 },

 Pause:function(id){
  var o=zxcFader['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Auto:function(id){
  var o=zxcFader['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ o.auto=true; oop.fade(o,!o.ud); },200);
  }
 },

 fade:function(o,ud){
  o.ud=ud;
  if (ud){
   o.cnt=++o.cnt%o.ary.length;
  }
  else {
   o.obj.innerHTML=o.ary[o.cnt];
  }
  this.animate(o,o.obj,'',ud?100:0,ud?0:100,new Date(),o.ms,ud);
 },


 animate:function(o,obj,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,n=[],n=(t-f)/mS*ms+f;
  this.opac(obj,n);
  if (ms<mS){
   f[3]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,ud); },10);
  }
  else {
   this.opac(obj,t[0]);
   if (o.auto){
    o.to=setTimeout(function(){ oop.fade(o,!ud); },ud?o.holdout:o.holdin);
   }
  }
 },

 opac:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }


}

zxcFader.init({
 ID:'tst',               // the unique ID name of the parent node.             (string)
 Array:[                 // an array of HTML code to diusplay.                 (array)
  'text 1 &nbsp;<img src="http://www.sovgraceopc.org/images/cross.png" /> text 2',
  'text 3',
  '<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" /> text 4 &nbsp;<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" />'
 ],
 FadeDuration:1000,     //(optional) the duration in milli seconds.            (number, default = 1000)
 HoldIn:2000,           //(optional) the fade in hold delay in milli seconds.  (number, default = FadeDuration*4)
 HoldOut:200            //(optional) the fade out hold delay in milli seconds. (number, default = 500)
});

zxcFader.init({
 ID:'tst2',
 Array:[
  'text 1 &nbsp;<img src="http://www.sovgraceopc.org/images/cross.png" /> text 2',
  'text 3',
  '<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" /> text 4 &nbsp;<img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" />'
 ]});


/*]]>*/
</script>
</body>

</html>

**james438** · 12-18-2012, 04:32 PM

This is a great help thanks! I will see if I can integrate it into my website when I get home from work.

**jscheuer1** · 12-18-2012, 06:30 PM

I worked it out using jQuery. I got rid of all the script code you had for fading the color and in it's place I put:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">
jQuery(function($){
	var duration = 1000; //length of the fade transitions, both in and out
	var delay = 3000; //length of time each message is seen for
	function fadethem(){
		$('#fade2 *').stop(true, true);
		$('#fade2 .a8, #fade2 img').fadeIn(duration, function(){
			$(this).delay(delay).fadeOut(duration, function(){
				$(this).css({display: 'none'});
				$('#fade2 .a2').fadeIn(duration, function(){
					$(this).delay(delay).fadeOut(duration, function(){
						$(this).css({display: 'none'});
						fadethem();
					});
				});
			});
		});
	}
	fadethem();
});
</script>

I added this to the stylesheet:

Code:

#fade2 .a2 {
	display: none;
}
#fade2 img {
	display: inline;
	vertical-align: top;
}

and made the markup of the fade2 div like so:

Code:

<div id="fade2"><span class="a8">Grace for the guilty </span><img src="/images/cross.png" width="24px"><span class="a8"> Rest for the weary</span>
<span class="a2">My grace is sufficient for you, for my power is made perfect in weakness. (2 Corinthians 12:9)</span>
</div>

That way non-javascript people will see the first message.

It's true the text will distort in IE 8 and less. However, with jQuery once the text has faded in it will no longer be distorted.

It is possible to run the old code for IE 8 and less only. But that seems like a lot of trouble for so few browsers. Their market share is small and shrinking. And as I say it's not so bad in them anyway.

I would also advise just using the image. The time it takes for the font to load is the biggest drain on load time for the page.

Demo (some browsers will not allow the downloadable fonts cross domain as I'm attempting in this demo. Opera and Chrome are good with them):

http://home.comcast.net/~jscheuer1/s...8/sov-fade.htm

I will see about using color fading with the text for IE 8 and less. jQuery can do that with a small add on that I made from its UI module. Integrating it with the opacity change might be tricky, or not. I will see.

**jscheuer1** · 12-18-2012, 10:04 PM

OK, new demo, same problem with the downloadable fonts (they'll be OK in all browsers that support them once you get this on your domain):

http://home.comcast.net/~jscheuer1/s...sov-fade-t.htm

This one uses jQuery's text color fading on the text and opacity fading on the image. All browsers can be happy with that. Only change is the addition of this script (3k, right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...4.color.min.js

And the on page code is now (remember to still get rid of all of the other fading code you had):

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.24.color.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var duration = 1500; //length of the fade transitions, both in and out
	var delay = 5000; //length of time each message is seen for
	var first = true;
	function fadethem(){
		$('#fade2 *').stop(true, true);
		$('#fade2 img').fadeIn(duration);
		$('#fade2 .a8').show().css({color: first? '#000' : '#c9e4ff'}).animate({color: '#000'}, duration, function(){
			first = false;
			$(this).delay(delay).animate({color: '#c9e4ff'}, duration, function(){
				$(this).css({display: 'none'});
				$('#fade2 .a2').show().css({color: '#c9e4ff'}).animate({color: '#000'}, duration, function(){
					$(this).delay(delay).animate({color: '#c9e4ff'}, duration, function(){
						$(this).css({display: 'none'});
						fadethem();
					});
				});
			});
			$('#fade2 img').delay(delay).fadeOut(duration);
		});
	}
	fadethem();
});
</script>

Use the same style additions and markup changes as from my last post.

**james438** · 12-19-2012, 04:16 AM

Thanks for that. I agree that it is a big drain and I will try to move away from loading a font just for that one letter. I am trying it out on my site here:

http://www.sovgraceopc.org/index3.php

I notice that in IE8 the png is rather distorted durning fadeout. I will see if I can fix it with a jpg image instead.

Thank you for the demos too. I have next to no knowledge of javascript and what you gave me is very easy to apply to my site.

EDIT: Using a jpg image as opposed to a png image has fixed the issue for me. Using a jpg image is a little less versatile for the site, but it is a minor inconvenience that I suspect no one will notice. The fading text and image appears to be working great now. I'll try testing it a little more and then apply it to the rest of my site.

Thanks again!

**jscheuer1** · 12-19-2012, 04:37 AM

Great!

If it's a PNG with alpha layers, which if memory serves it is, you can use IE's proprietary alpha image loader for it in IE 8 and less. The code for that is a bit complicated, especially if you (which you should) limit it to only IE 8 and less. But there are iepngfix plugins, which if judiciously applied will work out well for most things.

I came up with a more modular/configurable approach for the latest (the text fade with color, image fade with opacity one):

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.24.color.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var duration = 1500; //length of the fade transitions, both in and out
	var delay = 5000; //length of time each message is seen for
	var color = {from: '#c9e4ff', to: '#000'};
	var selector = '#fade2 div'; //selector for content divider element

	var first = true, $divs = $(selector), counter = -1, $div, $img;
	function fadethem(){
		$('span, img', $div).stop(true, true);
		if(($div = $divs.eq(++counter)).size()){
			$img = $('img', $div).fadeIn(duration);
			$('span', $div).show().css({color: first? color.to : color.from}).animate({color: color.to}, duration, function(){
				first = false;
				$(this).delay(delay).animate({color: color.from}, duration, function(){
					$(this).css({display: 'none'});
					fadethem();
				});
				$img.delay(delay).fadeOut(duration);
			});
		} else {
			counter = -1;
			fadethem();
		}
	}
	fadethem();
});
</script>

This requires a different markup on the page:

Code:

<div id="fade2">
          <div><span class="a8">Grace for the guilty <img src="/images/cross.png" width="24px"> Rest for the weary</span></div>
	<div><span class="a2">My grace is sufficient for you, for my power is made perfect in weakness. (2 Corinthians 12:9)</span></div>
</div>

Note especially that each content is now in its own div now, and that only one span is used in each of these and that one span encompasses all of the content. I think it should be able to work with more than one span, but it just doesn't. I don't know why yet, but it will probably come to me. And it's strange too, because you can have as many images in each one as you like - that's not a problem.

What's nice about this one is that you should be able to use any number of these nested divs, and that the class names of the spans are not used by the code. So as long as you follow the format, you can have any spans with any class names in there without having to edit the script.

**vwphillips** · 12-19-2012, 10:46 AM

and if I want more than 1 on page or pause it on mouseover?

**jscheuer1** · 12-19-2012, 05:12 PM

More than one is fairly easy. The pause is trickier than I thought and may need a rethinking. For more than one:

Code:

<script type="text/javascript">
(function($){
	$.fn.fadeTextColorImageOpacity = function(options){
		options = options || {};
		var defaults = {
			duration: 1500, //length of the fade transitions, both in and out
			delay: 5000, //length of time each message is seen for
			color: {from: '#c9e4ff', to: '#000'},
			contentel: 'div'
		}, opts = $.extend({}, defaults, options), first = true, $divs = $(opts.contentel, this), counter = -1;
		$divs.css({color: opts.color.from}).eq(0).css({color: opts.color.to});

		function fadethem(){
			if((opts.$div = $divs.eq(++counter)).size()){
				opts.$img = $('img', opts.$div).fadeIn(opts.duration);
				opts.$div.show().css({color: first? opts.color.to : opts.color.from}).animate({color: opts.color.to}, opts.duration, function(){
					first = false;
					opts.$div.delay(opts.delay).animate({color: opts.color.from}, opts.duration, function(){
						opts.$div.css({display: 'none'});
						fadethem();
					});
					opts.$img.delay(opts.delay).fadeOut(opts.duration);
				});
			} else {
				counter = -1;
				fadethem();
			}
		}
		fadethem();

	};
})(jQuery);
</script>

which can be made external. Then the on page init:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#fade2').fadeTextColorImageOpacity();
});
</script>

Notice the defaults in the main function. Any of those can be overridden in the init, example:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#fade2').fadeTextColorImageOpacity({color{from: #fff, to: #000}, duration: 3000});
});
</script>

Styles should be set in the stylesheet to ensure that none of the elements in the content have overriding color properties set. And for this one, these styles and markup are good:

Code:

#fade2 div {
	display: none;
}
#fade2 div.first {
	display: block;
}
#fade2 div.first img {
	display: inline;
	vertical-align: top;
}

Code:

<div id="fade2">
          <div class="first"><span class="a8">Grace for the guilty </span><img src="/images/cross.png" width="24px"><span class="a8"> Rest for the weary</span></div>
	<div><span class="a2">My grace is sufficient for you, for my power is made perfect in weakness. (2 Corinthians 12:9)</span></div>
</div>

The problem with a pause is that, once set in motion, the delay() will carry through. If the mouseover happens after that, I'm not sure how to break out of the delay() which will still force a fade out. It's like a timeout, but safer for use in jQuery, and I'm not sure yet if/how it can be cleared.

**jscheuer1** · 12-20-2012, 12:38 AM

OK, Vic, james (if you're interested),

I had a lot of other things I needed to deal with today, but I was giving this some thought. I think the timeout/interval in jQuery is really only a problem when used to create or sustain a loop of animation from outside of its callback function(s). At least that's what I remember from the last time I was dealing with this. So on that basis a pause is easy, everything as far as the markup and styles are the same from my last post. Here's the new script (can and probably should be external):

Code:

<script type="text/javascript">
// jQuery fadeTextColorImageOpacity Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	$.fn.fadeTextColorImageOpacity = function(options){
		options = options || {};

		if(this.size() > 1){return this.each(function(){$(this).fadeTextColorImageOpacity(options);});}

		var defaults = {
			duration: 1500, //length of the fade transitions, both in and out
			delay: 5000, //length of time each message is seen for
			color: {from: '#c9e4ff', to: '#000'},
			contentels: 'div', //selector to indicate discrete elements used to house each individual content piece
			pauseel: this, //if pause, element that pauses the effect on mouseover
			resumedelay: 1500, //if pause, how long until resume after mouseout
			pause: false //pause on mouseover?
		}, opts = $.extend({}, defaults, options), $cntnts = $(opts.contentels, this),
			counter = -1, pause, $cntnt, $imgs, fadetimer;

		$cntnts.css({color: opts.color.from, display: 'none'}).eq(0).css({color: opts.color.to, display: ''});

		if(opts.pause){
			opts.pauseel.hover(function(){
				pause = true;
				clearTimeout(fadetimer);
			}, function(){
				pause = false;
				fadetimer = setTimeout(fadeoneout, opts.resumedelay);
			});
		}

		function pausecheck(){if(!pause){fadetimer = setTimeout(fadeoneout, opts.delay);}}

		function fadeoneout(){
			first = false;
			$cntnt.animate({color: opts.color.from}, opts.duration, function(){
				$cntnt.css({display: 'none'});
				fadeonein();
			});
			$imgs.fadeOut(opts.duration);
		}

		function fadeonein(){
			if(($cntnt = $cntnts.eq(++counter)).size()){
				$imgs = $('img', $cntnt).fadeIn(opts.duration);
				$cntnt.show().animate({color: opts.color.to}, opts.duration, pausecheck);
			} else {counter = -1; fadeonein();}
		}
		fadeonein();
		return this;
	};
})(jQuery);
</script>

Sample invocation:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#fade2').fadeTextColorImageOpacity({pause: true, pauseel: $('#fade2').parent().attr('title', 'Paused, move mouse away to restart')});
});
</script>

Of course, if you want only a default one:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#fade2').fadeTextColorImageOpacity();
});
</script>

is all you need. And you can have as many as you want on a page. And if they all have the same options, only different content, you can initialize them all in a single invocation via a shared class selector.

It might be a good idea to preload the images though and to stick with smaller images.

I at first thought this would be of limited use. But then I remembered that IE 8 is probably going to be with us for quite some time and that this, or something like it is probably the best solution to fading text and images in that browser.

The alternative is to, instead of fading the text in and out, fade a covering element that's empty, but has the same background, in and out over the top of the text as it's changing. That's probably better for some situations, like where the background is an image, not a color.