Template:Background: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(Alright, reverting it back. I think it's impossible to do what I'm trying to do without modifying one of the parameters which could ruin some other pages.)
(URL images aren't supported by the wiki, unless someone changes "$wgAllowExternalImages" to true.)
 
(11 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Doc}}
{{Documentation}}
<includeonly><onlyinclude><div style="width:calc(100% + 48px); height:calc(100% + 22px); background-color:{{{bgcolor|transparent}}}; opacity:{{{opacity|0.05}}}; overflow:hidden; pointer-events:none; user-select:none; position:absolute; z-index:-1; left:-24px; top:{{{top|2px}}}">
<includeonly>
 
<onlyinclude>{{#if:{{{url|}}}|{{Error|Background URL images are not supported.<br>URL: {{{url}}} }}|<div style="width:calc(100% + 48px); height:calc(100% + 22px); background-color:{{{bgcolor|transparent}}}; opacity:{{{opacity|0.05}}}; overflow:{{#ifeq:{{{mode|0}}}|2|visible|hidden}}; pointer-events:none; user-select:none; position:{{#switch:{{{mode|0}}}|#default=absolute|1=static|2=sticky}}; z-index:-1; left:-24px; top:{{{top|2px}}}">
<div style="background:linear-gradient(180deg, rgb(38,38,38) 0%, rgba(38,38,38,0) 100%); width:100%; height:{{{gradient-height|150px}}}; position:absolute; z-index:1"></div>
<div style="background:linear-gradient(180deg, rgb(38,38,38) 0%, rgba(38,38,38,0) 100%); width:100%; height:{{{gradient-height|150px}}}; position:absolute; z-index:1"></div>
<div style="width:100%; display:flex; justify-content:center; position:absolute; z-index:0"><!--
<div style="width:100%; display:flex; justify-content:center; position:absolute; z-index:0"><!--
-->{{{1|}}}<!--
--><span style="{{#switch:{{{mask|}}}|false=|-webkit-mask-image:{{{mask|linear-gradient(to right, transparent, black 5%, black 95%, transparent)}}};}}">[[File:{{{file|}}}|link=|{{{size|}}}]]</span><!--
--><div style="background:linear-gradient(0deg, rgb({{{gradient-color|38,38,38}}}) 0%, rgba({{{gradient-color|38,38,38}}},0) 100%); width:100%; height:{{{gradient-height|150px}}}; position:absolute; z-index:1; bottom:0"></div>
--><div style="background:linear-gradient(0deg, rgb({{{gradient-color|38,38,38}}}) 0%, rgba({{{gradient-color|38,38,38}}},0) 100%); width:100%; height:{{{gradient-height|150px}}}; position:absolute; z-index:1; bottom:0"></div>
</div>
</div>
</div></onlyinclude></includeonly>
</div>}}</onlyinclude>
 
</includeonly>

Latest revision as of 04:48, 24 April 2025

English (en)Deutsch (de)Esperanto (eo)Español (es)Français (fr)Suomi (fi)Hrvatski (hr)Magyar (hu)Italiano (it)日本語 (ja)한국어 (ko)Nederlands (nl)Polski (pl)Português (pt)Português do Brasil (pt-br)Русский (ru)Slovenčina (sk)Svenska (sv)Türkçe (tr)Українська (uk)Tiếng Việt (vi)中文 (zh)中文(臺灣) (zh-tw)
Curly brackets white.pngTemplate Documentation [view] [edit]
Icon-translate.png Available doc translations
View
Page history

This template allows you to add a background for an article.

Parameters and Examples

Name Description Example Preview
{{{file}}} The path to the image.
{{Background | file = Hlalyx1.jpg }}
Preview is not possible
{{{opacity}}} Allows you to change the opacity of the entire block.

(0.05 by default)

{{Background|opacity=0.5}}
Preview is not possible
{{{bgcolor}}} Controls the background color of the block.

(transparent by default)

{{Background|bgcolor=rgb(255,255,255)}}
Preview is not possible
{{{gradient-color}}} Controls the color of the bottom gradient.

(38,38,38 by default)

{{Background|gradient-color=50,50,50}}
Preview is not possible
{{{gradient-height}}} Controls the height of the gradient.

(150px by default)

{{Background|gradient-height=600px}}
Preview is not possible
{{{mode}}} Controls the position of the background image on the page.
  • 0 – Absolute (default): Always at the top of the page.
  • 1 – Static: The regular position where the template occurs in the wikitext
  • 2 – Sticky: Like static, but the image follows the user when scrolling about, until the containing block (such as a simple <div>) ends.
{{Background|mode=1}}
Preview is not possible