PatternSkinCssCookbookTopBarBackgroundImage < TWiki

Webs
Main
Sandbox
TWiki

You are here: FS > TWiki Web > PatternSkinCssCookbookTopBarBackgroundImage	r1 - 14 Oct 2005 - 23:41 - TWikiContributor
EditAttachPrintable

Start of topic | Skip to actions

---+!! 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>

End of topic
Skip to actions | Back to top

Show attachments

Hide attachments

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
css	topbarimage.css	manage	0.3 K	14 Oct 2005 - 20:55	ArthurClemens^?	css to frame the page centered on the screen

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding FS? Send feedback