1

I'm trying to make something like this on Tailwind or pure css...

Power Bar

So basically we could share some background between elements with some css similar like this (we use this class on each element):

.item {
    background-image: linear-gradient(to right, red, blue);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
and this is the HTML, it shouldn't matter the amount of divs, the important thing is to display the complete gradient scale... 
            <div class="w-full mb-4 ">
                <div class="flex flex-row" >
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1" ></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>
                    <div class="h-10 item mx-1 rounded-b-full rounded-t-full w-1"></div>                        
                </div>
            </div>

The problem is that "background-attachment: fixed" is relative to the viewport and not the container element. So in order to see the full color scale I have to maximize the browser.

Is there any trick for this or any background-attachment that is relative to the container but not the viewport?

Tadeo Rod
  • 574
  • 5
  • 11
  • can you share the html code? you will have many element like the screenshot or less? – Temani Afif May 26 '19 at 12:47
  • Yes I will have multiple divs with the "element" class. Inside a wrapper div. I'm skipping details like margins, width and height of the divs, I'm more concerned about the background – Tadeo Rod May 26 '19 at 15:45
  • the solution will depend on your html code, that's why you need to share you use case. We cannot give you a generic solution because there is no way to make `fixed` related to a container – Temani Afif May 26 '19 at 15:54
  • HTML code added – Tadeo Rod May 26 '19 at 18:10
  • Hi @TemaniAfif, I closed the duplicate question as you just pointed out. Do you have any idea about how to solve this? – Tadeo Rod May 27 '19 at 13:56
  • a generic solution: no .. I can only give workaround or approximation for some specific use case but you didn't share any particular HTML structure, you simply added a *generic* html code without any CSS so I doubt you will get a clear answer unless you give more details about your use case with real code so people (and not only me) can help you. – Temani Afif May 27 '19 at 14:05
  • Sorry, my bad. The only custom class is .item which code is at the beginning of this post. The other classes are TailwindCSS classes. w-full = width:100%, mb-4 = margin-bottom : 1rem; – Tadeo Rod May 27 '19 at 14:45
  • I understand I have made a very specific question for this, that's why I asked something similar in the other post but like more generic or simpler. I will be researching more on this. Thanks anyway – Tadeo Rod May 27 '19 at 14:52

0 Answers0