Forum:Background images

Wikia - creating communities

Now, I have another question, how do I add a background image, such as the book background in Wikipedia? I won't use anything distracting from readers, but just something that will make it look a bit nicer. Thanks. TheMaskedMeerkat 21:47, 26 April 2007 (UTC)

That's done using CSS in your MediaWiki:Monobook.css. ~Dantman^(talk) tricks Apr 26, 2007 _@ 23:10 ^(UTC)

Ok. I have an idea of how CSS works, so I can probably get that done. TheMaskedMeerkat 16:16, 27 April 2007 (UTC)

Do note that Wikia is coming out with a New skin which may mean you'll need to come up with a new style later on. ~Dantman^(talk) tricks Apr 27, 2007 _@ 17:03 ^(UTC)

And what about the Skin1? It isn't in preferences, but looks cool :D --Ciencia Al Poder (talk) ^-@WikiDex 17:41, 27 April 2007 (UTC)

Yes, it looks cool but it's hidden for a reason (according to Splarka, it's broken). Ummm... and I had a few problems with it messing my account around (although it's partly my fault for adapting MediaWiki's source code). --Leon:2323 | SMARTSIG | Contribs 20:43, 27 April 2007 (UTC)

[edit] Should inline CSS style work for inserting a background-image ?

There are examples that show use of feint images behind text and these all seem to rely on defining a class in a skin-name.css file or common.css

Should it be possible to use inline CSS instead? This does work for background-color so I don't understand why it is not working for background-image.

Desired background image is: and is located at url http://images.wikia.com/central/images/e/e3/Watermark_-_level_1.gif

So this wiki markup :

before table

:{| border="1" cellspacing="1" cellpadding="1" style="border-collapse:collapse;"
||empty
|-
||<span style="background-image: url(http://images.wikia.com/central/images/e/e3/Watermark_-_level_1.gif);
    background-repeat: no-repeat;
    background-position: top left;">should have BG in table cell</span>
|}

<span style="background-color: #FFFFBF">after table</span>

<span style="background-image: url(http://images.wikia.com/central/images/e/e3/Watermark_-_level_1.gif);
    background-repeat: no-repeat;
    background-position: top left;">should have background</span>

Renders as :

before table

empty

should have BG in table cell

after table

should have background

Can anybody point out what I am doing wrong here?

I've tried locating the style code between the (|) pipes. Still no joy!

Najevi 17:27, 24 May 2008 (UTC)

Background images are disabled from mark-up, to prevent abuse. Background images bypass the external images limitations, and could be harmful because could exploit some browsers pointing to an image with any extension, allowed or not. The only way to have image backgrounds is to use CSS in Common.css and so on. --Ciencia Al Poder (talk) ^-WikiDex 19:11, 24 May 2008 (UTC)

Thanks for the quick response, hopefully I can still cancel that lobotomy appointment. ;-)

I'd be surprised if I am the first (or the last) contributor to a wikia hosted site to spin my wheels on this subject. Your "Live wiki help" staff could not tell me that inline CSS styles cannot be used to implement background images.

Do you suppose that this advice could be made more prominent in the Advanced editing help pages? Being a newcomer to wiki markup but not too lazy to search for answers you can well imagine how I wasted a considerable number of hours yesterday trying to make a watermark appear behind a particular cell in a table. I did not want to be toying around with common.css as I would not have known what I was doing.

[edit] Note to other authors

As stated above you cannot use inline css styles to achieve a background image effect. That feature has been disabled on wikia.

You must define a class for each watermark in your site's common.css style sheet:

http://YOURSITE.wikia.com/wiki/MediaWiki:Common.css

For the image above that class definition might look like:

 .wm-1 {
    background: url(/images/e/e3/Watermark_-_level_1.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
 }

and when used in your article it is referenced like this:

<span class="wm-1">should have background</span>

:{| border="1" cellspacing="1" cellpadding="1" style="border-collapse:collapse;"
||empty
|-
|class="wm-1" |should have BG image in table cell
|}

During development and debug it's best to use your personal style sheet for whatever skin you have chosen for the site e.g. http://YOURSITE.wikia.com/wiki/User:Myname/monobook.css

changes made in this file only affect the user Myname

Once debugged you can safely move them to your site's common.css or ask an admin (aka SysOp) to do so for you.

Najevi 05:41, 25 May 2008 (UTC)