Single post in Free CSS, Userscripts, etc
Forum Index > Other > Other Art > Free CSS, Userscripts, etc >
Replacing images with CSS
QUOTE originally posted by Spewpa
Just curious, is there a way to replace the images on the counters?
1. As a CSS property
The image is loaded as a CSS property, so you can just set a new property. For example, select all fields with the 'normal2.png' background and set a new custom background.
.field[style*='normal2.png'] {
background-image: url("https://placekitten.com/g/600/345") !important
}
2. As the src of an img tag
The more interesting case is when the image is loaded as the HTML <img> element. There's no way to tell CSS "select all images and replace the value of src with something else". CSS cannot modify existing attributes.
But there's one trick we can use, the object-position property.
For an img tag, object-position describes where the graphic is positioned relative to the box of the img element. To make this clear, here's a cat loaded with the img tag. We give the img a red border and padding to highlight the box of the element.
Avatar by Kaelwolfur.
Sent from my PokéNav