%META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="1"}%

---+!! PatternSkinCssCookbook Recipe: Put a wide background image in the top bar

*This recipe shows how to put a background image while keeping the logo (and possible other elements in the top bar).*

The style below sets [[%ATTACHURL%/universe.jpg][an image]] as background of =#patternTopBar=. The image is higher than the top bar, but because the left bar and main contents have their background set to white the rest of the image is not shown.

Add the dynamic variable link to the big image:
<verbatim>
<style type="text/css" media="all">
#patternTopBar { background-image:url("%ATTACHURLPATH%/universe.jpg"); background-position:0 500px; }
</style>
</verbatim>

The =background-position= shifts the image in the div 'viewport' - in this case we shift the image 500px up to show an interesting part.

<div class="twikiHelp">
%ICON{info}% If you don't write this overloading style in a template and use an external =.css= file, you need to set the image to the absolute url:
<pre>
&lt;style type="text/css" media="all">
#patternTopBar { background-image:url("<nop>%ATTACHURL%/universe.jpg"); background-position:0 500px; }
&lt;/style>
</pre>
You can always write a =&lt;style>= in a topic - all current browsers support this - but the page won't validate as valid XHTML.
</div>

<style type="text/css" media="all">
#patternTopBar { background-image:url("%ATTACHURLPATH%/universe.jpg"); background-position:0 500px; }
#patternMain
</style>


%META:FILEATTACHMENT{name="topbarimage.css" attr="" autoattached="1" comment="css to frame the page centered on the screen" date="1129323328" path="topbarimage.css" size="259" user="ArthurClemens" version=""}%
