Template:Background image — coding help

It looks like you haven't entered any content using the "line1" parameter.

About

Fandom doesn't support adding background images the traditional way. This template offers a work-around.

Warning: Fragile code

Don't edit this template code unless you are familiar with complex code.

If not, don't let this stop you from learning! Visit your sandbox (User:<insert name here>/Sandbox), copy-paste the code, and tinker as much as you'd like.

Parameters

These parameters let you customize the results when you use the template. We have a lot of them!

width: Adjust the width of the box.
height: Adjust the height of the box, if desired.
bgcolor: Choose the background color.
textColor: Choose the text color.
padding: Modify the padding (10px) applied to the content.
opacity: Adjust the background image's opacity.

Content:

image: Swap in your chosen image. By default, it gives you teal glitter.
heading: Add an optional heading to your box.
line1: Enter text and/or HTML code.
line2: An optional second paragraph for your convenience.

CSS edits:

outerDivStyles: Apply CSS to the entire div.
contentStyles: Apply CSS to the entire content.
headingStyles: Edit the heading CSS.
lineXStyle: Edit the CSS for line 1 and line 2.

Examples

Finally, you can add background images!

Fandom code doesn't allow typical background images. But this code uses a work-around.

Enjoy!

You can change the CSS.

For example, now {{{contentStyles|}}} specifies a 300px white box. The background goes behind it.

This allows both readability and 100% background opacity.

{{Background image
|width=380px
|heading=Finally, you can add background images!
|line1=Fandom code doesn't allow typical background images. But this code uses a work-around.
|line2=Enjoy!
}}

{{Background image
|width=380px
|opacity=1
|contentStyles=width: 300px; background-color: white; margin: auto;
|heading=You can change the CSS.
|line1=For example, now {{{contentStyles|}}} specifies a 300px white box. The background goes behind it.
|line2=This allows both readability and 100% background opacity.
}}

More info

Base code by MissLunaRose.

Customizable background image box

Template parameters[Edit template data]
Parameter		Description	Type	Status
Box width	`width`	Width of the box, including your BG image. (default 400px) Example 380px	Unknown	suggested
Box height	`height`	Optional, should be no taller than the image height Example 300px	Unknown	suggested
BG image	`image`	The file name of your background image Example BG MissLunaRose Stars 1 Spring Purple.png	File	suggested
BG image opacity	`opacity`	Reduce opacity as needed for readability (default 0.5) Example 0.75	Unknown	suggested
Background color	`bgcolor`	A background color for the entire box. (default white) Example LightCyan	Unknown	suggested
Text color	`textColor`	default black	Unknown	suggested
Outer div CSS styles	`outerDivStyles`	Any styles you want applied to the whole box Example font-family: Georgia, serif;	Unknown	suggested
Text area padding	`padding`	Default 10px	Unknown	suggested
Text area CSS styles	`contentStyles`	Any styles you want for the text area Example text-align: center;	Unknown	suggested
Heading text (optional)	`heading`	Add a heading to your box	Unknown	suggested
Heading CSS styles	`headingStyle`	Special CSS styles for the heading Example color: MidnightBlue;	Unknown	suggested
Text line 1	`line1`	Put content in here. Example I love CSS!	Unknown	required
Text line 1 CSS styles	`line1Style`	Any CSS you want to apply to line 1 Example font-size: 16px;	Unknown	suggested
Text line 2 (optional)	`line2`	A convenient second paragraph Example I also love HTML!	Unknown	suggested
Text line 2 CSS styles	`line2Style`	Any CSS you want to apply to line 2 Example font-size: 14px;	Unknown	suggested
Container CSS classes	`class`	Add special classes if needed (e.g. for link color control). Dark-links class is there by default but can be overridden Suggested values `dark-links` `light-links`	Unknown	optional