CSS Image Overlaying

[Jlarranaga]

What's the problem you're trying to solve?

I have a video background then I want another image on top of that in a div then the card image on top of that. But when that happens the paper image disappears. Also I cant center the title and button.

Post any code you think might be relevant (one fenced block per file)

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error messages

What is your best guess as to the source of the problem?

Either z-index or the position style is wrong. And the object-fit style options.

What things have you already tried to solve the problem?

asked class mates, google, try to debug the best I can. Tried multiple different styling options.

Paste a link to your repository here

https://github.com/Jlarranaga/Project1-WAR

[Jlarranaga]

Also when I add the card back-red image from the JS code. The paper image on the player deck disappears... along with another paper image

[nayaba]

In regards to your first question, I believe what you want is to be targeting the divs within the #card element and then giving them a background image (in your css).

As for the card backs - I'm not able to recreate this error. Are you applying a brick-red class to your elements via javascript? If so, perhaps this class is also being applied to the paper?

[Jlarranaga]

There are no divs in the card element. The cards are coming from a seperate CSS class. The cardStarter class.

I don't follow... what do you mean brick-red class?

[nayaba]

First of all my bad - I meant back-red class!

Second, these are the divs I'm referring to. They are children of the cards section, right?

      <div id="playerDeck"><img src="images/Medieval-DeckHolder.png" alt="Deck Background" id="playerDeckBackground"></div>
      <div id="battlePlayerCard"></div>
      <div id="computerDeck"></div>
      <div id="battleComputerCard"></div>
      <div id="battleResult"><img src="/images/Battle Scroll.png" alt="Message Scroll"></div>

[Jlarranaga]

Yes in the JS file the red-back class is being applied. and yes those divs will contain the card images but the cards are coming from the cardstarter class

[Jlarranaga]

And this is where in JS the back-red class gets applied.

[Jlarranaga]