CSS repeating colors in background-CodePudding

I want my site to have repeated colors in the background, but I don't want to use images

for example the background can be
red, white, red, white, repeated horizontally

is it possible to do

body {
  background-color: red, white;
  background-repeat: repeat-x;
}

CodePudding user response：

You can achieve repeated background colors using repeating-linear-gradient()

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div{
background: repeating-linear-gradient(to right, red 0%, white 20%, red 20%);
  
}
</style>
</head>
<body>

<div>Hello World</div>

</body>
</html>

refer this link for more info

CodePudding user response：

I doesn't know how the effect you really want to acheive, but this is the effect using background-image: repeating-linear-gradient() to assign different colors to the text based on line break.

div {
  --spacing: 2em;
  line-height: var(--spacing);
  background-image: repeating-linear-gradient(red 0 var(--spacing), blue 0  calc(var(--spacing) * 2))
}

<div>For the general term, see Stack overflow and Stack overflow (disambiguation). For the parent company, see Stack Exchange.
Stack Exchange, Inc.
Stack Overflow logo.svg
Stack Overflow Home.png
Screenshot of Stack Overflow in November 2020
Type of site    Knowledge market
Question and answer
Available in    English, Spanish, Russian, Portuguese, and Japanese
Owner   Prosus
Created by  Jeff Atwood and Joel Spolsky
CEO Prashanth Chandrasekar
URL stackoverflow.com Edit this at Wikidata
Commercial  Yes
Registration    Optional
Launched    15 September 2008; 13 years ago[1]
Current status  Online
Content license 
CC BY-SA 2.5 (until April 2011)
CC BY-SA 3.0 (until May 2018)
CC BY-SA 4.0
[2]
Written in  C#[3]
Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]</div>

CodePudding user response：

html {
    height: 100%;
}

body {
    height: 100%;
    background: repeating-linear-gradient(90deg,blue 0%, blue 25%, green 25%, green 50%,red 50%,red 75%,yellow 75%,yellow 100%);/*Explanation below*/
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

<div id="content">
    <p>This is some content.</p>
</div>

Explanation

Example 1

lets say we have 4 colours [a,b,c,d]
so :-
variable p=100/4=25
so we get 4*2= 8 values:

Note: first 0 and last 100 is default, each multiples of variable p is repeated twice

we put these values in same order in repeating-linear-gradient percentages

Format:

background: repeating-linear-gradient(90deg,a 0%, a 25%, b 25%, b 50%,c 50%,c 75%,d 75%,d 100%);

We can also observe that in above format end of a is start of b (25%) and end of b is start of c (50%)

if you want vertical colours remove that 90deg,

Example 2

lets say we have 8 colours [a,b,c,d,e,f,g,h]
so :-
variable p=100/8=12.5
so we get 8*2= 16 values:

Format:

background: repeating-linear-gradient(90deg,a 0%,a 12.5%,b 12.5%,b 25%,c 25%,c 37.5%,d 37.5%,d 50%,e 50%,e 62.5%,f 62.5%,f 75%,g 75%,g 87.5%,h 87.5%,h 100%);