geostocker geostocker - 21 days ago 6
CSS Question

Image not showing up in table

I'm working myself through a course in vanilla JS offered through my university. This course is only in vanilla JS, so no jQuery (bummer, I know...).

My question is not about asking for help solving something, but rather trying to figure out why something isn't showing up.

We have been tasked with creating a simple boulder dash game by using skeleton-code provided by the professor.

I've created a 2d array that holds the game-map where every element in the array holds a reference (a number) that corresponds to a specific .png-file.

After having worked with CSS and JS previously I know that you can use the z-axis of items to put something 'above' another item. However, in my case it doesn't seem to be working, or I'm missing something else.

In the if-clause where I'm drawing the map you can see that the first number (9) that i'm looking for creates a cell that will hold a class called 'baddie' (the player), but will also hold an id referring to 'open'.

var newRow = false;
content.appendChild(document.createElement('table'));
for (var row = 0; row < 10; row++) {
// Each column in row
if (newRow) {
content.appendChild(document.createElement('tr'));
}
for(var col = 0; col < 10; col++){
if (gameArea[row][col] == 9){
tile = document.createElement('td');
tile.id = 'open';
tile.className = 'baddie';
content.appendChild(tile);
console.log("IM HERE");
} else if (gameArea[row][col] == 10){
tile = document.createElement('td');
tile.id = 'open';
content.appendChild(tile);
}
else if (gameArea[row][col] == 11){
console.log("found one");
tile = document.createElement('td');
tile.id = 'wall';
content.appendChild(tile);
} else if (gameArea[row][col] == 12) {

} else {

}
}
newRow = true;


I'm expecting that baddie (since having a higher z-index) will be placed on top of 'open', but that doesn't seem to be occurring. Even if I remove the reference to 'open', 'baddie' doesn't show up.

This is a link to a JS-fiddle I've set up: jsFiddle, where you can find all of the code.

If my question isn't clear enough I need to figure out why the Kyubi file doesn't seem to show up?

In my local files the Kyubi.png file is in the parent folder of the tiles:

enter image description here

All the tiles show up just as in the fiddle, but not the player-object...

Answer

You are setting the background image url as a property of the .baddie class. Your default background (non-baddie) is set via id.

Due to css specificity, the id based background is higher priority than the class background.

You also have an issue in that you are assigning the same id ("open") to multiple elements - an id should be unique.

Find a way to set the background on the td elements with less specificity than the id - try just assigning it to td.

  td {
    z-index: 1;
    height: 31px;
    width: 31px;
    background-image: url(https://orionhub.org/file/Todai-OrionContent/images/new/grass0.png);
    border: 1px solid white;
}

js fiddle fix by changing the selector for open: jsfiddle

Comments