0

I want to fill the entire (html) background with the special character below. Is it possible only with css?

html::before {
  content: '\2591';
}

This is still not enough..

j08691
  • 204,283
  • 31
  • 260
  • 272
szpal
  • 647
  • 9
  • 27
  • Do you really just want to fill the background with a checker style pattern? Or do you specifically want to use that character? – imvain2 Aug 02 '22 at 17:42
  • Just for background – szpal Aug 02 '22 at 17:44
  • This uses linear-gradient to fill the background with checkers, you can change the size in the background position. Is that what you were looking for? https://stackoverflow.com/a/35362074/3684265 – imvain2 Aug 02 '22 at 17:46
  • No, that's not what I was looking for – szpal Aug 02 '22 at 17:50
  • 1
    You could create a 4x4 pixel bmp or png, convert it to a base64 data url and use it like [this](https://jsfiddle.net/rjfasmu7/2/). – huysentruitw Aug 02 '22 at 17:53

2 Answers2

3

Try this:

html {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='25px' width='20px'><text x='0' y='15' fill='red' font-size='20'>░</text></svg>")
}
<p>Example website content</p><p>Example website content</p><p>Example website content</p>
Zorion85
  • 132
  • 5
1

First repeat the character inside content a lot of times (use CSS variables to make the code shorter) then use filter to continue the repetition:

html::before {
  --c: '\2591  \2591  \2591  \2591  \2591  \2591  ';
  content: 
    var(--c) var(--c) var(--c) var(--c) '\A'
    var(--c) var(--c) var(--c) var(--c) '\A'
    var(--c) var(--c) var(--c) var(--c) '\A';
  white-space: pre;
  line-height: 1.3;
  position: fixed;
  filter:
   drop-shadow(23em 0)
   drop-shadow(46em 0)
   drop-shadow(92em 0)
   drop-shadow(0 4em)
   drop-shadow(0 8em)
   drop-shadow(0 16em)
   drop-shadow(0 32em)
   drop-shadow(0 64em);
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415