11

I am making a seamless CSS pattern on the web. I know this is totally nonsense and non-practical at all. But it is just for the sake of having fun.

http://codepen.io/vennsoh/pen/iFKyo

I have done creating my first tile. Now I am thinking of a way to repeat it to fill up the whole background.

Can I complete this feat by just using HTML and CSS? Or must I use javascript to complete this?

-

Here are my steps if using javascript, correct me or suggest better ways:

  1. Calculate current browser width and height.
  2. A single tile is (150x150), I will just need to create as many div(s) to cover the whole screen.

-

I might want to make things move around, each polygon changes color, etc. It won't be static. I am not looking for a background-image solution.

Thanks, Venn.

Vennsoh
  • 4,853
  • 5
  • 26
  • 41
  • interesting concept. in a way, you're trying to repeat a div all over the webpage? – He Hui Feb 05 '13 at 02:09
  • Is there some reason you don't just use a repeating background image? I can't think of a good reason not to do it that way, and you haven't given us any clues as to what you're ultimately trying to accomplish. – Blazemonger Feb 05 '13 at 02:14
  • 4
    Sometimes people are just weird, there are people out there who create illustrations in MS Paint just for fun. I just want to test things out. (: A seamless background pattern that will fill up the whole screen. – Vennsoh Feb 05 '13 at 02:15
  • We can't possibly help you with ideas you MIGHT want to implement. Please give us a concrete problem and some code you've actually tried. This is a site for programmers with coding issues, not for creative types with visionary ambitions that outstretch their technical know-how. Voting to close. – Blazemonger Feb 05 '13 at 02:24
  • 1
    "fun" no i dont want fun here, I always look for solutions to my problems. – Jai Feb 05 '13 at 02:28
  • Thanks Blazemonger for the helpful comment. Yes, I am still new with web programming. (: I guess I will have to take a jab at the code myself. I don't feel there is anything wrong with doing things differently in hope to achieve a creative result. It might not work at all but it is worth trying. – Vennsoh Feb 05 '13 at 02:33
  • 2
    I certainly do want *some* level of fun in here. And I'm sure others do too. Otherwise, why would the [pile of socks question](http://stackoverflow.com/questions/14415881/how-to-pair-socks-from-a-pile-efficiently) attract so much attention? – bfavaretto Feb 05 '13 at 02:34

2 Answers2

3

Actually this is possible with only html and css. The problem in your example is that every part of background will overlap when you set background-repeat property because they have different size, so you just need to resize and position your shapes differently. The easy way to do this in your case is set one background-size for every shape (size of desired complete pattern) and change their position accordingly.

I've modified part of your example to give you an idea of how it should look like: http://codepen.io/anon/pen/pnxyd

dimusic
  • 4,123
  • 2
  • 28
  • 31
1

Just add, 

float:left;

to the css, and then just make multiple copies of the div, just like here...http://codepen.io/anon/pen/rlDqh

I guess this should do the trick.

Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88