Changing animal picture sizes

The Pet Adoption Toolkit search page provides images in the HTML code in two ways:

1. Background image of a div container.  This image is visible by default.
2. An actual HTML img tag.  This image is hidden by default.

If you would like to use the img tag instead of the background image you can use the following custom styles.  The !important really is important because the image URL and size are specified directly on the element in the HTML code.

/* Hide the div container's background image */
.rgtkSearchPetPic {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
}
/* Show the img instead */
.rgtkSearchPetPicImg {
  display: block !important;
  width: 225px;
  height: auto;
}

Showing multiple images on the Search results

Also, some of the search results layouts (like List 3) include multiple animal pictures hidden in the code waiting to be used.  Each picture has a specific element id assigned by picture 0, 1, 2, etc.  This example shows how you can hide the background image and make the first two pictures visible:

/* Hide the div container's background image */
.rgtkSearchPetPic0, .rgtkSearchPetPic1 {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Show pictures 0 and 1 using the img tags instead */
.rgtkSearchPetPicImg0, .rgtkSearchPetPicImg1 {
  width: 250px;
  height: auto;
  display: block !important;
}