1

I'd like to insert a picture to separate the 'limits' of the progress bar.

Hence the right side would be red, than I'd have my little picture, followed by a green side

Is it possible?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Jean
  • 601
  • 1
  • 10
  • 26
  • Did you give it a shot? E.g. Using CSS? Very simple to at least try yourself... Inspect the html of the progressbar (client side html, not server side xhtml) and be creative. CIient side it is all just html, css and javascript – Kukeltje Aug 24 '17 at 10:03
  • Of course I've tried. My problem is not about inserting green and red. It's more about having my picture between the colours and I'm still struggling to do that (sorry but I'm a beginner) – Jean Aug 24 '17 at 10:19
  • Images can be added as a background too... Using JSF does not mean you should not learn html and css. And always, always post what you tried. Not only in text but also in code. See [ask]. Basically this is a plain html/css question. – Kukeltje Aug 24 '17 at 10:35

1 Answers1

2

Client side it is all just html, css and javascript. A css linear gradient already works great (boundaries at 10 and 90 percent)

.ui-progressbar {
    background: -moz-linear-gradient(left, rgba(0,255,0,1) 0%, rgba(0,255,0,0) 10%, rgba(255,0,0,0) 90%, rgba(255,0,0,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
    background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,0) 10%,rgba(255,0,0,0) 90%,rgba(255,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 );
}

And if you want to combine it with an image, see

How do I combine a background-image and CSS3 gradient on the same element?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47