Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fill a page with boxes using only CSS and HTML

Tags:

html

css

Say you've got a 100px by 100px container. You want to fill it with 5px by 5px "boxes". For the sake of simplicity you can ignore padding, border width, margin. Is there a way to declaratively do this using only CSS and HTML (without manually declaring the exact amount of boxes)?

Edit: My original intention was that the boxes are in fact elements. But I appreciate the creativity.

like image 699
Kayce Basques Avatar asked Aug 25 '16 01:08

Kayce Basques


1 Answers

If these "boxes" are individual HTML elements, then no, that is not possible with just HTML and CSS. You would need to use server-side code or JavaScript to generate them.

If these "boxes" are just visual elements, you can use a 5px by 5px background image, and then set background-repeat: repeat; in the CSS.

div {
  width: 100px;
  height: 100px;
  background: url("http://i.stack.imgur.com/lOtMo.png") 
              repeat
              top left/5px 5px;
}
<div></div>
like image 192
4castle Avatar answered Sep 20 '22 04:09

4castle