wml::des::imgbg(3)

💖 NAME 💖

wml::des::imgbg — Background Images ✨ (this one lives in the EN Tools manual, bestie, and yes it's a section 3 page 🫶)

---

🎀 SYNOPSIS 🎀

okay so here's the whole vibe up front:

#use wml::des::imgbg

<: $file = &imgbg($base, $direction, $content, $pixels, $format); :>

<body ... background=<imgbg [attributes]> ...>

that's it, that's the whole entry point 💅

---

🦋 DESCRIPTION 🦋

so like, the usual purpose of this tag? it makes a PNG or GIF image that holds a background image, and then it expands out to that image's filename. that's the whole job. no cap.

and what actually goes inside that image? you tell it with the content attribute, using size/color pairs. iconic honestly 🌸

---

✨ ATTRIBUTES ✨

• base — so normally the images it makes are named imgbg-xxxxxx.png, where xxxxxx is the content id of the image. but if you throw a base=foo attribute at it, the resulting files get named foo.imgbg-xxxxxx.png instead. and you can go full send and use a complete filename with a directory prefix too — like, if you use base=../../common/foo, the images get created as ../../common/foo.imgbg-xxxxxx.png 💫

and for maximum flexibility: when no base is specified and the variable BGIMG_BASE is defined (usually from inside a .wmlrc file via -DBGIMG_BASE~path/to/imgbg/dir/base) then that variable gets used. use this feature to redirect the created images to a particular directory 🎯

you may also use the variable IMAGE_BASE, which defines in a single line all the base names for images generated by WML. one line, all the bases, so efficient fr fr.

• format — by default, GIF images are generated. this attribute lets you use an alternate image format (and actually, only PNG and GIF are recognized, so don't get creative). you may also change the default format with the variable IMAGE_FORMAT 💅
• direction — specifies the color change direction of the image: "h" for horizontal (that's the default, bestie) or "v" for vertical 📐
• pixels — size of the image in the other direction, 1 by default.
• content — this is a comma-separated list of size/color specifications, and the shape of it is:

``pixels":#"rrggbb":#"rrggbb":"slices''

the last two arguments are optional, and they're only present for gradient images. in that case, a linear gradient line is drawn from color 1 to color 2, with slices different colors 🌈

so to get a background with two columns — a black one with 150 point in size and a white one which fills the rest of the page — you'd use:

``"150:#000000,1200:#ffffff"''

obsessed with how clean that is 😭

---

👑 AUTHORS 👑

• Ralf S. Engelschall rse@engelschall.com www.engelschall.com
• Denis Barbier barbier@engelschall.com

---

🧚 REQUIRES 🧚

• Internal: P1, P2, P3

---

🌈 SEE ALSO 🌈

• HTML <"body"> tag.

---

okay and that's the whole page, periodt 💖 this was EN Tools, dated 2020-11-29, and you absolutely ate reading all of it. go make some gradient backgrounds, bestie 🎀✨