CODEWITHSUNDEEP
htmlcss
szpal
szpal

Reputation: 647

Html special character background (no image, no string, no js)

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..

Upvotes: 0

Views: 135

Answers (2)

Temani Afif
Temani Afif

Reputation: 273571

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);
}

Upvotes: 1

Zorion85
Zorion85

Reputation: 142

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>

Upvotes: 3

Related Questions