Template:Background: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
(!! BUG !! A pretty half-assed fix that will definitely cause other problems. Due to how high the gradient was before, it would cause the page title to appear darker than it was supposed to. This could be seen on basically any page using {{background}}.)
(URL images aren't supported by the wiki, unless someone changes "$wgAllowExternalImages" to true.)
 
(16 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Doc}}
{{Documentation}}
<includeonly><onlyinclude><div style="width:calc(100% + 48px); height:calc(100% + 88px); 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 03: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
Page history

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

Usage

This template is usually written in a column. To use it, insert {{Background}} on the desired page and specify the parameters under the template name in the following format:

{{Background | parameter 1 = value | parameter 2 = value }}

Parameters and Examples

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

(0.05 by default)

| opacity = 0.5
{{{bgcolor}}} Controls the background color of the block.

(transparent by default)

| bgcolor = rgb(255,255,255)
{{{gradient-color}}} Controls the color of the bottom gradient.

(38,38,38 by default)

| gradient-color = 50,50,50
{{{gradient-height}}} Controls the height of the gradient.

(150px by default)

| gradient-height = 600px
{{{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.
| mode = 1