0

I've followed this question to create a diagonal pattern in some elements of my website. However, the result is different in each element.

For example my buttons work as expected:
Diagonal gradient as expected

However, when I try to apply it to other elements such as:
Diagonal gradient weird

Lines seem to collapse erratically and the result is not the same.

My css code is

background-color: transparent;
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.2) 1px, transparent 1px, transparent 3px);

Any ideas why this is happening? Thanks a lot.

Community
  • 1
  • 1
ithil
  • 1,758
  • 1
  • 19
  • 37

1 Answers1

0

Try this:

background-image: -webkit-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -moz-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -ms-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: -o-repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);
background-image: repeating-linear-gradient(-45deg, rgba(29,178,216,0.3), rgba(29,178,216,0.3) 25%, transparent 25%, transparent 50%, rgba(29,178,216,0.3) 50%);

-webkit-background-size: 4px 4px;
   -moz-background-size: 4px 4px;
     -o-background-size: 4px 4px;
        background-size: 4px 4px;

/* Background size must be an even number! */
Adrian Puescu
  • 162
  • 12