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?

Improve this question
8
  • can you share the html code? you will have many element like the screenshot or less? Commented May 26, 2019 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 Commented May 26, 2019 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 Commented May 26, 2019 at 15:54
  • HTML code added Commented May 26, 2019 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? Commented May 27, 2019 at 13:56
Related questions
3
CSS - Usage of background-attachment
0
background-image with css
29
Tailwind CS backgroundImage doesn't work for me
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.