The Pet Adoption Toolkit search page provides images in the HTML code in two ways:
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; } |
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; } |