How to have an HTML element repeat to fit the entire background if it is not an image

Question

I would like to have a div element that I could set to repeat using CSS*, but it seems as though that is only possible with background image (background-image:...; background-repeat:repeat;). How can I do it with a regular div?

note: the div contains an svg, which contains 2 polygons (2 right triangles that make a square. I want them to cover the entire screen).

*Edit: Tried using CSS to do this, getting very weird results. I assume Javascript is a better option for this.

        <div class='square' style="background-repeat:repeat-x;">
            <svg viewBox='0 0 100 100'>
                <polygon points='0,0 2,0 0,2' />
                <polygon points='2,0 2,2 0,2' />
            </svg>
        </div>

It's possible to use svg as a data-uri, allowing you to use as background-image url. Then you should be able to use background-repeat. See for example http://stackoverflow.com/questions/10768451/inline-svg-in-css — yezzz, May 18 '17 at 19:08

score 0 · Accepted Answer · answered May 22 '17 at 19:59

Here is the CSS approach @yezzz alluded to.

html, body {padding: 0; margin: 0;}

body {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyIDIiIHhtbDpzcGFjZT0icHJlc2VydmUiPiAgICAgIDxwb2x5Z29uIHBvaW50cz0nMCwwIDIsMCAwLDInIGZpbGw9JyNjYzU1NTUnIC8+ICA8cG9seWdvbiBwb2ludHM9JzIsMCAyLDIgMCwyJyBmaWxsPScjNTVjY2NjJyAvPjwvc3ZnPg==);
  height: 100vh;
  width: 100vw;
  background-size: 100px;
}

Encoded SVG can be represented with the following:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2 2" xml:space="preserve">    
  <polygon points='0,0 2,0 0,2' fill='#cc5555' />
  <polygon points='2,0 2,2 0,2' fill='#55cccc' />
</svg>

How to have an HTML element repeat to fit the entire background if it is not an image

1 Answers1