the problem is: you can't let random users to set arbitrary urls. background-image will be loaed automaically, once the url set. imagien that someone set url like "xxxhub.com/my_favorite_actress" or "mytracking.cookiestealer.com" - all readers will be affected, someone will report staff... do you really need this?

i'd suggest to create some pool of backgrounds, with unique classes, and let users to define class. yes, you will need dozens of classes, but it is like the only safe way.

I suppose that makes sense, though I don't see how that would be any different from how users can already upload or link to nsfw/spam sites.

I'm fine with a ton of classes if that's how it's gotta be, I was just wondering if there was a cleaner way to do that. Our CSS page is getting full as is lol.

the difference: when you see a link, you may or may not click on it. it will be totally your desire. unlike malicious background image, that will be loaded unconditionally for each your reader.

there might be "cleaner" way: use file: and absolute position, in order to place header text above the image.

I suppose that makes sense. What about this:

Our header images are all formatted the same way, "/File:Area_Art_[name].png"

Would it be possible for a script to find the stored image based on just a word, so that for example putting in "Dirtmouth" as the Parameter would bring up "/File:Area_Art_Dirtmouth.png"? That would prevent vandalism via linking to other sources.

If not, I'll work with the suggestions provided.

it is possible. i'd still suggest non-script approach: templates and styles are simpler to maintain than js.

You're very right. Well, off to work then!

smth like

some text above
<div class="myheader">
<div class="myheader-image">[[File:1.png]]</div>
<h1 class="myheader-text">the header</h1>
</div>
some text below
css:
.myheader {
    position: relative;
    max-height: 50px;
    overflow: hidden;
}
.myheader-image img {
    width: 100%;
}
.myheader-text {
    position: absolute;
    top: 0;
}