How to get the <h:graphicImage> in JSF automatically resize and fit into browsers window?
<p>Given the following snippet</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"&gt;

&lt;h:head&gt;
 &lt;title&gt;MyTitle&lt;/title&gt;
 &lt;h:outputStylesheet library="css" name="styles.css"/&gt;
&lt;/h:head&gt;
&lt;h:body&gt;
 &lt;h:graphicImage name="images/MainBackground.jpg"/&gt;
&lt;/h:body&gt;
&lt;/html&gt;
</code></pre>

<p>I'd like the <code>MainBackground.jpg</code> to resize automatically. Following css file does <strong>not</strong> resize it:</p>

<pre><code>#mainBackground {
 width: auto;
 height: auto;
}
</code></pre>

<p>But if I set the width and height directly in the <code>h:graphicImage</code> tag and comment out the <code>h:outputStyleSheet</code> like</p>

<pre><code>&lt;h:head&gt;
&lt;title&gt;MyTitle&lt;/title&gt;
&lt;!--&lt;h:outputStylesheet library="css" name="styles.css"/&gt; --&gt;
&lt;/h:head&gt;
&lt;h:body&gt;
 &lt;h:graphicImage id="mainBackground" name="images/MainBackground.jpg" width="200" height="200"/&gt;
&lt;/h:body&gt;
&lt;/html&gt;
</code></pre>

<p>resizing suddenly works. How can I use the external css file working in Java EE context? What is the proper way to do this?</p>

<p><strong>BTW</strong> I found some tutorials using google and also some questions here on SO regarding embedding an image but all solutions provided either didn't cover resizing or they have not worked for me.</p>