Stack Overflow
Stack Overflow

Questions tagged [repeating-linear-gradient]

28 questions
1
vote
1 answer

Is it possible to set border-image and background both with repeating-linear-gradient property?

I'm trying to set border-image and background properties both with the repeating-linear-gradient option, but with different values for the same
element. I don't know how to do it, because with my attempt it seems the gradients parameters are…
xKobalt
  • 1,498
  • 2
  • 13
  • 19
1
vote
2 answers

Fix for Mirrored Diagonal Background Pattern

I've created a solution for a mirrored diagonal background pattern but bug exists only in Firefox where at certain screen widths, a vertical line appears between the left and right positioned elements. Does anyone have a solution or hack? The only…
Daniel Murphy
  • 421
  • 4
  • 14
1
vote
0 answers

CSS repeating-linear-gradient broken at Safari 11?

I just upgraded OSX to High Sierra, and Safari to 11.01, and my repeating linear gradient is all out of whack. Is this a known issue with the latest version of Safari? background: repeating-linear-gradient(-64deg, transparent, transparent…
Andy Westmoreland
  • 81
  • 1
  • 5
1
vote
2 answers

Css background: offset for repeating-linear-gradient

I have drawn a grid as a repeating background of a
the following way in SASS: background-image: repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent…
Antoine C.
  • 3,730
  • 5
  • 32
  • 56
1
vote
1 answer

Why does firefox not render this linear gradient when the background-size values exceed 255px?

I'm attempting to create a grid overlay using an absolutely positioned uninteractable div. I'm attempting to accomplish this using a repeating-linear-gradient attribute as I've seen suggested elsewhere for this solution. The implementation of this…
John Kulp
  • 123
  • 1
  • 12
1
vote
1 answer

How to keep line width the same in a diagonal border using repeating-linear-gradient?

I'm trying to use repeating-linear-gradient on a border that has a 1px wide line with 6px of spacing between each line. Can someone tell me what I'm doing wrong so the lines are not the same width when they repeat? I've tried tweaking the pixel…
Cofey
  • 11,144
  • 16
  • 52
  • 74
0
votes
1 answer

Linear gradient background repeats

I made this linear-gradient background animation in css for my to-do list, but as I add more items to the list the website is scrollable and the background repeats making it look ugly. I made some research about it and I saw background-attachment:…
Sebox
  • 9
  • 2
0
votes
0 answers

How to have a repeating-linear-gradient in Android

Android have linear gradient support, but I did not find any documents on repeating-linear-gradient. Is repeating-linear-gradient support on…
Hhry
  • 823
  • 1
  • 8
  • 19
0
votes
0 answers

repeating-linear-gradient stops repeating on high height containers on mobile Chrome and Brave

Noticed the following behavior on Mobile Chrome and Mobile Brave on an Android device (probably iOS too): As shown by example, I have this div with height that is 39000px. At some point after about 2/3 of scroll height has been scrolled you can…
easwee
  • 15,757
  • 24
  • 60
  • 83
0
votes
1 answer

How to use repeating gradient in place of linear-gradient

I have this linear-gradient code here. https://jsfiddle.net/0qfy3ks2/ How would I have it use a repeating gradient instead? So the image is the same, just using a repeating gradient instead. background-image: repeating-linear-gradient The repeating…
user17382064
0
votes
1 answer

How do I make local attached repeating linear gradients

I've recently been trying to make a text area that uses a repeating linear gradient to separate lines, however, the gradient does not attach to the textbox when I'm scrolling. Am I doing something wrong? By the way, here's the code:
MisterJuanXDLOL
  • 85
  • 5
0
votes
1 answer

CSS3: "note lines" are jumping when text is long

I want to imitate "note lines" using repeating-linear-gradient (or simply line background-image, not important): .box { width: 500px; line-height: 25px; } .box--gradient { background-image: repeating-linear-gradient(transparent,…
lalezky
  • 374
  • 1
  • 3
  • 11
0
votes
1 answer

Color Stop Parameter in Linear Gradient

I have this repeating linear gradient CSS design. #div1{ background: repeating-linear-gradient(red, yellow 10%, green 20%); } I know what is meant by the color parameters but the percentage right after the color seems vague. What is it really…
user4621642
1
2