I am building a dashboard that allows me to manage 50+ separate projects. Each project has 3 - 5 Ci builds and I want to display the status of all these builds. I can load a build status badge for each job but I don't have anywhere near enough room to display 5 large badges.
What I want to do is take 1 pixel from this badge that will be either red, green or blue and then tile that one pixel to be a 10*10 pixel square so it's easy to see that all builds are green.
I think that I probably want to do this with css sprites but I've experimented a bit and can't get anywhere close to getting it to work.
Many thanks
Have you tried to use CSS background-size property?
You could use the badge as a background image and make it so big that only one pixel will be visible on the tile.
.my-tile {
width: 10px;
height: 10px;
background-image: url(YOUR BADGE URL) ;
background-position: left top;
background-size: 2000px 2000px; /* as big as you need */
}
Also see this working example on fiddle: https://jsfiddle.net/549bxa6r/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments