Template:Image Banner

Partially defines its styles as template styles

Some of the styles for this template are defined as template styles in Template:Image Banner/styles.css.

Partially defines its styles in Common CSS

Some of the styles for this template are defined in Common CSS.

Supplementary templates available

This template has supplementary templates that can be used with it:

• {{Force Image Banner Width}}

Template documentation
View or edit this documentation. (About template documentation) Note Portions of the template sample may not be visible without values provided.

Usage

Basic - with offset

Level 2 header; width of 1919 pixels; -709px of vertical image offset.

{{Image Banner|Loadscreen.webp|1919|h2=Header text|x=0px|y=-709px}}

↓

Header text

Custom image height

Height of 50px with level 4 header.
Vertical offset is set to -733px.

{{Image Banner|Random moving interior.webp|1919|h4=Header text|height=50px|x=0px|y=-733px}}

↓

Header text

Custom banner width

Forced the banner to be of certain width (600px in this example), but no more than the page width or the image width.

Note

The banner width is specified as 3rd number parameter; you must specify the unit (e.g. px for pixels).

{{Image Banner|Battle chaos1.webp|1919|600px|h2=Basics|x=-460px|y=-385px|h=120px}}

↓

Basics

Custom header block styles

Uses custom styles for the header, and also has a custom width.

{{Image Banner|Battle chaos1.webp|1919|h2=Basics|x=-460px|y=-385px|h=120px|header styles=background: linear-gradient(40deg, var(--color-cosmoBorderTop), var(--action-color--slightly-lighter));
box-shadow:
  1px 0 3px var(--action-color), 
  2px 0 4px var(--color-cosmoBorderBottom), 
  1px 0 2px var(--synt-high--color-comment), 
  inset 0 0 3px var(--action-color);}}

↓

{{Image Banner|Battle chaos1.webp|1919|h2=Basics|x=-460px|y=-385px|h=120px|header styles=background: linear-gradient(40deg, var(--color-cosmoBorderTop), var(--action-color--slightly-lighter)); box-shadow:

 1px 0 3px var(--action-color), 
 2px 0 4px var(--color-cosmoBorderBottom), 
 1px 0 2px var(--synt-high--color-comment), 
 inset 0 0 3px var(--action-color);}

Creates a image banner with a header at the start.

Template parameters

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
Image	1	Image file.	File	required
Image width	2	The width of the image in pixels. By default, the image will be as large as possible. You can a use non-negative value, up to the actual width of the image. Any overflow will be hidden.	Number	required
Banner width	3	The preferred width of the banner. The underlying image will not shrink, but get cropped instead. By default, the width is calculated to fit the image (if possible). The resulting width will be restricted to the width of the screen AND the image. Use {{Force Image Banner Width}} to define a width for all banners on a page.	String	suggested
H2 Header	h2	Header text. You must fill one of these (and only one).	String	suggested
Or H3 Header	h3	Header text. You must fill one of these (and only one).	String	suggested
Or H4 Header	h4	Header text. You must fill one of these (and only one).	String	suggested
Or H5 Header	h5	Header text. You must fill one of these (and only one).	String	suggested
Or H6 Header	h6	Header text. You must fill one of these (and only one).	String	suggested
Horizontal image offset	x	Horizontal offset of the image. Goes negative. The closer to zero the better - lower values will shrink the banner more. Auto value 0px	String	suggested
Vertical image offset	y	Vertical offset of the image. Goes negative. Auto value 0px	String	suggested
Image height	h	The height of the image. Auto value 75px	String	suggested
Header Wrapper Styles	header styles	Styles for the header block. Auto value background: linear-gradient(40deg, var(--color-cosmoBorderTop), var(--action-color--slightly-lighter)); box-shadow: 1px 0 3px var(--action-color), 2px 0 4px var(--color-cosmoBorderBottom), 1px 0 2px var(--synt-high--color-comment), inset 0 0 3px var(--action-color);	Content	suggested