Template:Background Image

Template Documentation  

This document is transcluded from Template:Background Image/doc.

Introduction

This template will display the background image as appropriately as possible while covering the background without altering the original aspect ratio.

Zoom and Display Rules

The template will scale the image to the same width/height as the window based on the image width or the smaller of the high school, so that the image completely covers the window.

In the following example: dark blue represents the complete picture, light blue is the window, that is to say, except for a few pictures whose aspect ratio completely matches the device (window) aspect ratio, most of the time the picture cannot be fully displayed.

The page displayed when using a horizontal picture

The page displayed when using a vertical picture

Attention

• Please place this template at the bottom of an article (instead of the top), otherwise will grab the pictures in this template and push them as the picture of the entry.
• Please place this template above the ==Official links== section of the article.
• Please try to use bitmap images with pixels not lower than 1920*1080 to ensure that the image will not be blurred after being forcibly enlarged on devices of various resolutions.

Usage

Parameters:

• url: The address of the image, both internal and external links.
• displaylogo: Displays the Moegirlpedia logo, which is enabled by default (yes), and can be disabled manually (pass in no). Hiding is generally not recommended.
• color: used to set a background color defined by a color value, the background color set by this parameter will be covered by the image of the url. This value can be set even when using an image, which may somewhat alleviate the clutter caused by the sudden display of the background image (the background color is displayed before the image has finished loading).
• position: used to position the background image, the default is to display it in the center (see the example in #Zoom and Display Rules). Commonly used positioning can refer to the following values:
  • [top]: Displays the top part first (this is usually used for vertical pictures)
  • [bottom]: Displays the bottom part first (this is usually used for vertical pictures)
  • [left]: Displays the left part first (this is usually used for landscape pictures)
  • [right]: Display the right part first (this is usually used for landscape pictures)

For precise adjustment, please use x-axis offset y-axis offset. The offset is based on the upper left corner of the image, and the commonly used units are percentage (%) or pixel (px). When using percentages, 100% is the remaining space of the larger side of the image after scaling minus the same side of the viewport. That is to say, setting 0~100% will not make the image excessively offset, revealing the original Moegirlpedia background. In addition, when the percentage unit is used, the setting of the y-axis offset for the horizontal chart is invalid, and the setting of the x-axis offset for the vertical chart is invalid. Other units do not have this restriction. You can use different units for x and y, as well as keywords (top, bottom, left, right). For example, see: #example7

The parameter value of :position is actually passed to the object-position property of CSS. For more information, please refer to MDN for An introduction to the CSS3 property object-position.

• shade: Sets the color overlay opacity of the background image, default is 0, optional values ​​are 0 to 1.
• shadeColor: Sets the color of the overlay, default is white.
• animate: Gives the background image a simple animation effect, which will be played after the image is loaded. The default value is show. This parameter is not limited to the values ​​listed below, and can be freely implemented (using Templatestyles) and filled in.
  • [none]: Do not use animation
  • [show]: Convert from transparent to opaque (100% opacity)
  • [shrink]: The size is changed from 115% to 100%
  • [clear]: from fuzzy to clear
  • [appear]: size from 130% to 100% + from transparent to opaque
  • [look]: The viewing angle changes, the larger the picture height, the more obvious it will be. When the position is bottom, the angle of view changes to (down => up => down), and in other cases (up => down => the value of the position parameter), you can also use [look-top] or [look-bottom] Mandatory. Note that if the height of the image is smaller than the height of the device after the image is adapted to the width of the screen (the image will be enlarged to fill the height of the screen), the effect will become "Reduce based on the upper left corner of the screen ( 150% => 100%)".
• action: specifies how the animation is performed, which is equivalent to the value starting from the second position in the animation attribute value of CSS. If not filled, the default value will be used.
• make: This parameter allows you to style a transparent div that takes up space in the background (such as some complex gradient function techniques) and use it as the background.
• style: Add css style to the background image. Note that if the style defined by the template is repeated, the corresponding css style of the template will be overwritten. It is recommended to use it after reading the template source code.

Replacing logo

After using this template to add a background image, an alternative Moegirlpedia logo will appear in the upper left corner of the screen. You can also choose to replace the logo with a custom image (this is generally not recommended).

• logo-url: The address of the logo image, both internal and external links.
• logo-size: Controls the logo size. If a value is passed in, this value specifies the width of the logo; if two values ​​are passed in (separated by spaces), the first value specifies the width of the logo and the second value specifies the height of the logo; if a keyword is passed in cover, the image is scaled so that it can completely cover the logo area, and the part of the image may not be visible; if the keyword contain is passed in, the image will be scaled so that it can completely fit into the logo area, and the logo area may be partially blank.
• logo-position: Fill in two css lengths here, which can only be in pixels, such as "-10px -17px", etc. If the format is incorrect, it will not work. This parameter sets the image offset value, with the upper left corner of the original logo as the origin, the positive direction of the x-axis to the right, and the positive direction of the y-axis to the upward. The two values ​​of this parameter respectively set the horizontal and vertical coordinates of the upper left corner of the new logo.

Shorthand

If you only fill in the image path, you can use the following writing:

{{background Image|fill image link here}}

Example

Example 1

Use an image as the background, all using default values.

{{Background Image|あそびあそばせ.jpg}}

Example 2

Use a color as the background.

{{Background Image|color=red}}

Example 3

Use an image as the background, and add a background color to reduce the visual abruptness when the image loads, and specify the animation effect as "appear".

{{Background Image
|url= あそびあそばせ.jpg
|color= #80DBB0
|animate= appear
}}

Example 4

Use an image as the background and add a yellow mask.

{{Background Image
|url= あそびあそばせ.jpg
|shade= 0.5
|shadeColor=yellow
}}

Example 5

Suppose custom implements an animation "fromBottom", and uses .

/* Example/styles.css */

@keyframes fromBottom {
  from {
    margin-top: 100vh;
  }
}

{{Background Image
|url=あそびあそばせ.jpg
|animate= fromBottom
|action= 0.3s ease
}}

Example 6

Use the "make" parameter to draw a background.

{{Background Image
|make= background:linear-gradient(red, blue)
}}

Example 7

Use the "position" parameter to precisely control the background image position.

{{BGI|url=horizontal picture.jpg|position=0 50%}}  <!-- equivalent to left -->
{{BGI|url=horizontal picture.jpg|position=100% 50%}}  <!-- equivalent to right -->
{{BGI|url=vertical picture.jpg|position=50% 0}}  <!-- equivalent to top -->

{{BGI|url=vertical picture.jpg|position=50% 30%}}  <!-- Offset 30% of the remaining space on the vertical direction -->
{{BGI|url=vertical picture.jpg|position=9999% 30%}}  <!-- horizontal direction parameter is invalid while using the vertical picture -->