http://css-tinkering.wikidot.com/component:css
http://css-tinkering.wikidot.com/test
I'm a novice to CSS coding, only been practicing a couple days maximum. I want the item1 class to change image depending on what $difficulty is set to when including the component. However, even if $difficulty is set to 1, which should signal an image to be put on item1 but nothing happens.
.top-box { display: grid; grid-template-columns: 500px; grid-template-rows: 182px; grid-gap: 10px; background-color: transparent; padding: 10px; } .top-box > div { background-color: transparent; text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .top-box.diff-1 .item1 > div { background-image: url("https://imgur.com/VXDVQf8.png"); object-fit: cover; background-attachment: scroll; width: 61%; max-height: 95%; }
This is the HTML:
[[/module]] [[div class="top-box diff-{$difficulty}"]] [[div class="item1"]] [[/div]] [[/div]] What am I doing wrong here?