Forum:Is it possible to add background images to table cells?

Forums: Index → Support Requests → Is it possible to add background images to table cells?

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 3131 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

And by 'background images', I mean images that work as the background 'layer' of the table, while the text or generally data that is added on the table's cells appear idividually from that background, acting as a different 'layer'. —The previous unsigned comment was by 89.104.138.43 (wall) . Please sign your posts with ~~~~!

Um, that's exactly what you would do. Not sure what you're asking, since you've kinda answered your own question. You just set the background-image of your table class to be the image you want. Best done through CSS, though. If you don't have admin rights on your wiki, and are therefore forced to do it completely in the "ordinary" spaces of the wiki, you're gonna be talking quite the little code dump to achieve it.

Please provide more details about your user rights on the wiki in question, as well as your level of familiarity with wikicode and/or CSS so an answer tailored to your needs can be provided. czechout ☎ ✍  fly tardis  14:25: Fri 18 May 2012 

Well, I while am an admin, I am afraid that I'm just getting started on Wikis, and therefore know very little concerning Wikicode.

Thanks for the help so far, but I am not quite sure how I can set the background-image. If you are referring to the source code of the table itself, and that I just have to add background-image="Namehere.png" in {| align="center" border="0" cellpadding="1" cellspacing="1" class="article-table" style="width:500px;" , well that didn't seem to work.

—The previous unsigned comment was by 89.104.138.43 (wall) . Please sign your posts with ~~~~!

Using admin privileges to edit the CSS pages is the only way to add a background-image to an element in a wiki. In-line CSS styling won't work for that. Check out this page for more information about using CSS for background images: http://www.w3schools.com/cssref/pr_background-image.asp

When you want to add a background image to an element, you have to edit the MediaWiki:Wikia.css on your wiki. For instance, if you wanted to give a background image to just the header cells of all tables, you would add this to the Wikia.css:

table th{
     background-image:url('your full image url');
}

However, the code above would affect all tables. If you want to set the background image for only a specific type of table, you would give that table a unique class, like this:

{|class="mytable"
!My header
|Some text...
|}

And then you would refer to that class in the css, like so:

table.mytable th{
     background-image:url('your full image url');
}

In your actual code, you would replace your full image url with the actual url of your image. --Gardimuer ^{ ʈalk } 15:55, May 18, 2012 (UTC)

[Sorry if this is redundant of the above, but I've spent time typing it up, so I might as well publish it.]

Okay, I wouldn't bother trying to do it inline like you're trying to do. I would do it through CSS. So, I'd throw the whole table into css. Let's imagine that we're going to create a table called "background-image". We would then style all the elements of the table — corresponding to the html tags <table>, <th>, <tr>, <tfoot>, <tbody> and <td> —  in your MediaWiki:Common.css file.

If you don't understand a word of what I've just said, then you need to back up and get grounded in table markup. A good place to start is wikipedia:Help:Table#Pipe_syntax_in_terms_of_the_HTML_produced. This will help you immensely if you're just starting out. After you read this, you'll be able to understand that {| means <table> and that ! means <th>. This knowledge will then allow you to understand the following CSS code quite easily:

table.background-image
{
	font-family: "font name 1", "font name 2"
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
table.background-image th
{
	padding: 12px;
	font-weight: normal;
	font-size: 14px;
	color: #339;
}
table.background-image td
{
	padding: 9px 12px;
	color: #669;
	border-top: 1px solid #fff;
}
table.background-image tfoot td
{
	font-size: 11px;
}
table.background-image tbody td
{
	background: url('http://wikia.com/images/Namehere.jpg');
}

What this is saying, then, is:

"In the table class called background-image, style the <td> elements this way, and the tbody td elements this other way — and style these other elements these other ways."

Then to call it up, all you'd have to do is this:

 
{|class="background-image"
! Header1
! Header2
! Header3
|-
| Row 1, Column 1 || Row 1, Column 2 || Row 1, Column 3 
|-
| Row 2, Column 1 || Row 2, Column 2 || Row 2, Column 3
|-
|)

And that's it! The picture you've defined in your css table.background-image tbody td would show up across all the rows and columns of your table body. And you'd have no impenetrable code in the table on your page. It's all tucked away neatly in the table.background-image definitions you've done in your css.

Oh, a word about getting the right url for the image. You have to go to and click on the image until it's the only thing on the page, surrounded entirely by white. The favicon in the URL bar will turn into a yellow "wikia w". Then you have to cut and paste that URL into the tbody tt definition line. czechout ☎ ✍  fly tardis  16:18: Fri 18 May 2012 

There is an easier way... much more easier than what CzechOut stated. You can create separate background images classes by defining each one of them in your Common.css filepage. Defining these classes can be anything, from "wallpaper1" and "mainpagebackgroundimage1" to "coolbackground1" and "awesomenesspic1" as long as it does not conflict with existing classes. Let's take Dead Space Wiki's Common.css page as an example:

.wallpaper1 { 
   background: url("http://images2.wikia.nocookie.net/deadspace/images/3/31/Dead_Space_by_HDspring.jpg") no-repeat center top !important;
}
.wallpaper2 { 
   background: url("http://images1.wikia.nocookie.net/deadspace/images/8/86/Dead_Space_2_by_Jessada_Nuy.jpg") no-repeat center top !important;
}
.wallpaper3 { 
   background: url("http://images1.wikia.nocookie.net/deadspace/images/e/e7/DeadSpace_-_Userpage.jpg") no-repeat center top !important;
}

As CzechOut said, background images will be added/loaded to a table if it is defined in the class field (class=""). So, to load up the background image of wallpaper1, just add in class="wallpaper1".

You can have different background images for tables if you do this way. :) — subtank ^(7alk) 16:32, May 18, 2012 (UTC)

Oh, if "background: url(blah blah blah)" doesn't work, use "background-image url(blah blah blah)" instead. :) — subtank ^(7alk) 16:33, May 18, 2012 (UTC)

While all of what you Subtank says is true, the disadvantage is that the only thing this class=wallpaper method will allow you to do is to define the image for the entire table. You can't, in my experience, add two class statements in normal wikitable markup (i.e. with pipes), so if you only defined the class relative to an image, you'd have to separately style each row, column, header, etc. within the inline markup of the table. Ultimately, in my view, this would not be easier, particularly if you wanted to define cell border tops and bottoms to create a grid.

Moreover, Subtank's method may not be appropriate to your needs, since the background would be for the entire table, incluing the table headers. By strictly defining the image to the tbody, the picture will not interfere with the header row (or, if applicable, the footer row).

It all really depends on what you want. czechout ☎ ✍  fly tardis  16:58: Fri 18 May 2012 

Alright, thanks everyone. Definitely a lot of food for thought. I will study your instructions and the tutorials that you have linked to me and will use them accordingly.

—The previous unsigned comment was by 89.104.138.43 (wall) . Please sign your posts with ~~~~!

Hey, sorry to open this issue again. I've been wrestling with the code on this and just can't seem to make it work; I've tried each of the options listed here now. I am admittedly pretty newbie when it comes to both CSS and Wikia's proprietary code and I could easily be making a very basic beginner error.

I currently have CzechOut's method in place, with changes to both the Wikia.css (http://taxon.wikia.com/wiki/MediaWiki:Wikia.css) and the Common.css (http://taxon.wikia.com/wiki/MediaWiki:Common.css) for this Wiki.

The test page where I am trying to have the background image show up is [[1]]. If there's more information I need to give to be useful, please let me know, and apologies for my beginner ignorance.

Taxon (talk) 00:01, July 25, 2012 (UTC)

I have done that sort of thing here, maybe it'll help. The first part of the page has an image acting as a background for the various elements. The sections below have tables where each table cell has its own backround image (the chess-looking thingys). The CSS for that page can be found here.

Are you sure you want to use a table for this? I somehow doubt that it's the optimal solution for you. If you provide more information on what you are trying to achieve, we might be able to give better suggestions. --IK ^Talk 17:40, July 25, 2012 (UTC)

Thanks for the example, IK; I'll look it over, it looks at my first glance similar in the basic structure to Subtank's suggestion earlier (which I was also unable to make work but I may give it another go).

If there is another way to do what I want I'm willing to try it, but I haven't figured it out yet...

What I want is an interactive map that non-admin members of my wiki can mark locations upon. (The background image is a map of a fictional city, for an RPG.)

To me, the way to do this would be to have the static map image of the fictional city in question as the background image for the entire table, and then have the cells of the table be editable by non-admin members so that they can pick a location on the map, add in a marker like an asterisk in the table cell that overlays that location on the map, and then the asterisk can be a link to internal wiki pages for the corresponding city locations.

The final table would probably be at least 30x30 for this to be feasible, but the cell size shouldn't be an issue if all people are putting in the 'occupied' cells is an asterisk or something similar.

Hopefully that wasn't terribly confusing an explanation of what I'm trying to achieve.

If there's a simpler way I'm all for it, but I don't have Flash so creating interactive graphics that way is probably out of the question, even if Wikia supports it, which I do not know if it does.

Taxon (talk) 02:57, July 26, 2012 (UTC)

Yeah, you don't want to use tables for a map. It's way too inconvenient.

What you need is a box that has the map background, and elements (such as markers and text) would be positioned inside it by using absolute positioning.

Check out the WoWwiki map, or a similar map I made. --IK ^Talk 12:11, July 26, 2012 (UTC)

Oh, that does definitely look more like what I want. Thank you hugely for the advice. I will check it out and see if I can duplicate it.

Taxon (talk) 21:19, July 26, 2012 (UTC)