org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-4B7957CA-D6B8-4F8A-8E15-A610D1534D6B.html
<!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Setting the widget background"/><meta name="abstract" content="You can set an image as the widget background in a Cascading Style Sheet (CSS) file that you refer to from the widget HTML file."/><meta name="description" content="You can set an image as the widget background in a Cascading Style Sheet (CSS) file that you refer to from the widget HTML file."/><meta name="DC.Relation" scheme="URI" content="GUID-70769124-8CCC-4389-9C45-2423B8BB04AC"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-5949FE0C-207D-4B15-8C03-96AE48986973"/><meta name="DC.Relation" scheme="URI" content="GUID-ED04600B-B079-4BC9-84B1-507604C09A4C"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-4B7957CA-D6B8-4F8A-8E15-A610D1534D6B"/><meta name="DC.Language" content="en"/><title>Setting the widget background </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-4B7957CA-D6B8-4F8A-8E15-A610D1534D6B">Setting the widget background</h1><div><p>You can set an image as the widget background in a Cascading Style Sheet (CSS) file that you refer to from the widget HTML file.</p>
<p>For example, the following code adds an image called background.png as the widget background. The image is stored in the <code>gfx</code> folder in the widget project folder.</p>
<pre class="codeblock">html {
height: 100%;
background: rgb(190, 220, 255) url(../gfx/background.png) no-repeat scroll 0% 0%;
font-size: 1em;
}
</pre>
<div class="figure" id="GUID-DBA5F0EA-8F8D-4942-888F-BE1764970E5F"><img src="GUID-A3BCF709-0CE9-49DD-9BCD-FD9ADAC0C9D6_d0e2502_href.png"/><p class="figure-title"><strong>Figure: </strong>Widget background file</p></div>
<div class="figure" id="GUID-91A41FF8-2EF2-4241-9324-273046A0233B"><img src="GUID-15A1A393-FA24-4580-BD71-27E458AD392D_d0e2510_href.png"/><p class="figure-title"><strong>Figure: </strong>Widget with the background</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>