CODEWITHSUNDEEP
htmlcss
Hii
Hii

Reputation: 5

Div does not support two images

I tried to make two separate div with different images attached to them. The problem is that when I put more than one div the second or the third image disappear and only the first in the CSS document appears.

HTML:

<div class="tokens">
  <div class="imageGriff", id="testphoto"></div>
  <div class="imageGriff" type="image" id="testphoto2"></div>
  <div class="imageSly", id="testphototwo"></div>
</div>

CSS:

.imageSly {
  content: url("/t2.png");
  position: relative;
  display: inline;
}​

.imageGriff{
   content: url("/token.png") no-repeat;
   position: relative;
   display: inline;
}​

This is what I got when I have two divs with imageSly. With 2 of them 2 elements will appear but no imageGriff element.

Upvotes: 0

Views: 63

Answers (1)

coreyward
coreyward

Reputation: 80041

Your code isn't working due to syntax errors.

  • Commas are not used to delimit HTML attributes
  • The content css property does not expect to have no-repeat in it

.imageSly {
  content: url("//placehold.it/200x100");
  position: relative;
  display: inline;
}

.imageGriff {
  content: url("//placehold.it/300x150");
  position: relative;
  display: inline;
}
<div class="tokens">
  <div class="imageGriff" id="testphoto"></div>
  <div class="imageGriff" id="testphoto2"></div>
  <div class="imageSly" id="testphototwo"></div>
</div>

Upvotes: 3

Related Questions