Jump to content

Topic on Project:Support desk

How to use an image as a background for a wiki page

22
Guycn2 (talkcontribs)

Does the MediaWiki software allow using an image as a background for a specific page?

I tried to do it by adding to following syntax to the beginning of the page, but it doesn't work:

<div style="background-image: url('image_path');">

(I did not close the <div> tag.)

I know it can be done by adding a code to "MediaWIki:Common.css", but I'm looking for a way to do it by editing the page.

87.123.13.181 (talkcontribs)

Adding code to MediaWiki:Common.css in fact is a way to do this and not even the worst one: CSS classes will allow you to make the rule match only on selected pages and it will kick in automatically without the need of further markup on the affected page.

Guycn2 (talkcontribs)

Unfortunately, I cannot use MediaWiki:Common.css to do it. I want my user page on the Hebrew Wikipedia to have a background image. I can't ask the administrators to insert a CSS rule just "for me". Therefore, I need a different way to do it. Is there any?

TheDJ (talkcontribs)

No you can't do that. It would be dangerous and annoying for others.

Guycn2 (talkcontribs)

Why would it be dangerous? I only want to use a bright image as a background for my page. There are no rules against it on my wiki.

87.123.3.39 (talkcontribs)

The CSS property

background-image

allows to include arbitrary images from anywhere in the internet. This is a security threat.

110.148.150.85 (talkcontribs)

Because it would allow you to automatically make anyone who visits the page silently make a request to any external server.

Guycn2 (talkcontribs)

I want to use an image from Commons. Not from external sites.

110.148.150.85 (talkcontribs)

Commons IS an external site, and there is no mechanism for only allowing "internal" or whitelisted links in `background-image`, so it's disallowed entirely.

Guycn2 (talkcontribs)

OK

87.123.51.192 (talkcontribs)

What 110.148.150.85 writes is not convincing: Actually, since Commons is under control of the Wikimedia Foundation just as Wikipedia is and since both are linked so closely, I actually do not really consider it external. After all, you can easily link pictures and stuff from Commons and that is what it's there for. So allowing to link things while at the same time disallowing to link them in one certain way is not logical.

MediaWiki has a configuration option called $wgAllowExternalImages, which allows to directly link external sources (and external this time really meaning coming from anywhere, from any URL). Additionally there is $wgAllowExternalImagesFrom which allows to whitelist certain domains while forbidding all others. This allows to link external sources from any URL on these domains. Generally both options are disabled, so that such linking is forbidden. I have not checked the MediaWiki source code, but I would guess that if these options were adjusted, it should be possible to show images from Commons, also as background-image.

110.148.150.85 (talkcontribs)

As far as the web is concerned, it is an external site. commons.wikimedia.org != wikipedia.org, and therefore it is an external site from wikipedia's point of view, regardless of their relation.

Guycn2 (talkcontribs)

Agree. Using images from Commons as background is definitely NOT a security threat. It's the same as showing these images regularly.

Ciencia Al Poder (talkcontribs)

@87.123.51.192: Even with $wgAllowExternalImages, MediaWiki won't allow those images appear as background images using wikicode / HTML inside pages. They must be coded inside any CSS page. background-image, and the presence of url() inside background: CSS properties is simply stripped from the generated HTML.

MediaWiki does its best to sanitize the output HTML generated from wiki code, to strip potentially dangerous code. External images aren't allowed by default, and parsing CSS properties to check if the images used as background are or not external or within the allowed domains is tricky, so just removing them is the safest way. Feel free to report a feature request for allowing that, but since you can achieve that with site stylesheets and others, that won't probably happen in the near future. Patches are welcome, though.

87.123.51.192 (talkcontribs)

I have not tested it, but: You say that putting these styles in any CSS page makes them work? I do know that this is working on the CSS pages inside the MediaWiki namespace, but Guycn2 cannot edit them.

However, I think there is your solution: If it works on the CSS pages, then you can put the styles on User:Guycn2/vector.css to make them appear for the Vector skin. They will only be visible for you yourself, but that is better than nothing, right?

Guycn2 (talkcontribs)

Indeed, but I really want anyone who visits my userpage to see a background image.

Ciencia Al Poder (talkcontribs)

If you want the background on your userpage, adding it to a CSS page might not be an option. I imagine bloating a wiki's CSS with specific styles for each userpage (in case more users request that) would be a burden for admins.

A more self-service solution would be to use JavaScript to detect when we're viewing a userpage, and include a CSS from a subpage from the current user page, that way users can use that stylesheet (that only the own user would be able to edit, apart from admins) to style the entire user page as they want. That, however, has more security implications than external images, since any user can exploit various CSS vulnerabilities from old browsers and load arbitrary CSS to people viewing their userpage.

The ideal solution here would be a MediaWiki extension that provides an interface to allow users to upload an image that would be used as a background image for their userpage, an image that's probably not stored as a normal file and that only that user is able to change. Admins should probably have the ability to delete any background image that they consider inappropriate. There doesn't seem to be a similar extension, though.

If external images are allowed on that wiki, or you can use an uploaded image from the wiki, you could also place it on the page, and then put the rest of the page content on an absolute positioned div on top of that image. That would give it a sort-of background image functionality, with their problems: you can't make the background repeat, it would make the content fixed-width, etc.

Guycn2 (talkcontribs)

Thanks for the explanation.

87.123.51.192 (talkcontribs)

> If you want the background on your userpage, adding it to a CSS page might not be an option...burden for admins

What I mean is putting the styles on the vector.css page inside the user's own userspace. This page can be edited by the user himself - there is no need for an admin to add any CSS changes. (This will only work, if $wgAllowUserCss is true, which by default, it is not.)

So, the external image solution as well as the CSS solution might both not be working.

However, I know there are some users - at least in the German Wikipedia - who do have their own images on their user page. I e.g. remember a small ghost, which always was at a fixed position somewhere at the side of the content area. How can these people do that?

Ciencia Al Poder (talkcontribs)

Styles under the user's vector.css are only visible for that user on any page, not for any user on that user page. The idea of putting a background image on your own userpage is that other people will see it, not only you. That's why I automatically discarded that idea and instead talked about adding that to the wiki's common.css (I assume people want them displayed on all skins).

The fixed position image is what I described about an absolute positioned div. For example: <div style="position:absolute; top: 20px; left: 20px;">[[File:Example.png]]</div>

Bawolff (talkcontribs)
ExclusiveEditor (talkcontribs)

may help.

Reply to "How to use an image as a background for a wiki page"